<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')"></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 {

  .dialog-container {
    padding: 15px 23px;
    width: 628px;
    border-radius: 0;
    position: relative;

    header {
      
      p {
        font-size: 14px;
        line-height: 16px;
        font-weight: 400;
        color: var(--c-right-side-header-text);
      }

      .close {
        position: absolute;
        top: 8px;
        right: 8px;
        margin: 0;
        cursor: pointer;
      }
    }

    main {
      margin-top: 24px;
      margin-bottom: 20px;
    }

    footer {

      .rect-button {
        border-radius: 4px;
      }
    }
  }

  .dialog-container {
    padding: 16px 24px;

    main {
      margin-top: 40px;
      margin-bottom: 12px;
    }

    footer {

      .rect-button.white {
        border-radius: 2px;
      }

      .rect-button:first-child {
        margin-right: auto;
      }
    }
  }

  .paint-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 240px;
    background-color: #F2F3F5;

    .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;
      }
    }

    p {
      position: absolute;
      font-size: 14px;
      line-height: 16px;
      color: #757780;
      pointer-events: none;
    }
  }
}

@media screen and (max-width: 628px) {
  .digital-signature-dialog .dialog-container {
    width: 100%;

    footer {
      margin-top: 0;
    }
  }
}
</style>
