<template>
  <Dialog class="digital-signature-dialog" :show="true" :dialogName="dialogName">
    <template #header>
      <CloseB class="close" @click="close" />
    </template>

    <div class="paint-container">
      <div class="keyboard-paint" style=""><input v-model="textContent" type="text" :placeholder="$t('signatures.appearanceDialog.signHere')" name="signature"></div>
    </div>

    <template #footer>
      <div class="rect-button white" @click="clear">{{ $t('signatures.clear') }}</div>
      <div class="rect-button white" @click="close">{{ $t('cancel') }}</div>
      <div class="rect-button blue" @click="save">{{ $t('ok') }}</div>
    </template>
  </Dialog>
</template>

<script setup>
import { computed, watch, ref } from 'vue'
import { useViewerStore } from '@/stores/modules/viewer'
import { useDocumentStore } from '@/stores/modules/document'
import core from '@/core'

const { text } = defineProps(['text'])

const emits = defineEmits(['modifyText'])

const dialogName = 'digitalKeyboardCreatePanel'

const textContent = ref(text)
const useViewer = useViewerStore()
const useDocument = useDocumentStore()

const show = computed(() => useViewer.isElementOpen(dialogName))

const close = () => {
  useViewer.closeElement(dialogName)
  clear()
}

const clear = () => {
  textContent.value = ''
}

const save = () => {
  emits('modifyText', textContent.value)
  close()
}
</script>

<style lang="scss">
.digital-signature-dialog {

  .paint-container {

    .keyboard-paint {
      flex: 1;

      input {
        width: 100%;
        font-size: 46px;
        line-height: 64px;
        font-weight: 400;
        color: #000;
        border: none;
        background: transparent;
        text-align: center;
        font-family: 'Courier New', Courier, monospace;
      }
    }
  }
}
</style>
