<template>
  <div class="select-type-popup" v-if="show">
    <Dialog :show="show" :dialogName="dialogName" :close="true">
      <p class="title title-color">{{ $t('signatures.selectTypeDialog.selectType') }}</p>

      <div class="select-text">
        <div @click="type = 'electronic'" class="option">
          <RadioBtnSel v-if="type === 'electronic'" /><RadioBtnDis v-else />
          <div class="text">
            <p class="title">{{ $t('signatures.selectTypeDialog.signWithElectronic') }}</p>
            <p>{{ $t('signatures.selectTypeDialog.signWithElectronicDesc') }}</p>
          </div>
        </div>
        <div @click="type = 'digital'" class="option">
          <RadioBtnSel v-if="type === 'digital'" /><RadioBtnDis v-else />
          <div class="text">
            <p class="title">{{ $t('signatures.selectTypeDialog.signWithDigital') }}</p>
            <p>{{ $t('signatures.selectTypeDialog.signWithDigitalDesc') }}</p>
          </div>
        </div>
      </div>

      <template #footer>
        <div class="rect-button blue" @click="toSign">{{ $t('signatures.selectTypeDialog.startSigning') }}</div>
      </template>
    </Dialog>
  </div>
</template>

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

const useViewer = useViewerStore()
const useDocument = useDocumentStore()

const dialogName = 'selectSignTypeDialog'
const show = computed(() => useViewer.isElementOpen(dialogName))
const activeTool = computed(() => useDocument.getActiveTool)

const type = ref('electronic')

const showDialog = (data) => {
  useViewer.setSelectedSignatureField(data)
  if (activeTool.value === 'addDigitalSign') {
    useViewer.openElement('addDigitalFileDialog')
  }
  else if (activeTool.value === 'addElectronicSign') openSignCreatePanel()
  else useViewer.openElement('selectSignTypeDialog')
}
core.addEvent('openSelectSignTypeDialog', showDialog)

const toSign = () => {
  useViewer.closeElement(dialogName)
  document.body.style.overflow = 'hidden'

  if (type.value === 'digital') useViewer.openElement('addDigitalFileDialog')
  else openSignCreatePanel()
}

const openSignCreatePanel = () => {
  useViewer.toggleElement('signCreatePanel')

  useViewer.setActiveToolMode('sign')

  useViewer.toggleActiveHand(false)
  core.switchTool(0)
  
  core.switchAnnotationEditorMode(0)
}
</script>

<style lang="scss">
.select-type-popup {

  .dialog-container {
    max-width: 372px;

    .close {
      float: right;
      margin-top: 3px;
    }

    main {
      margin-top: 32px;
    }

    footer {
      .rect-button {
        width: 100%;
        border-radius: 4px;
      }
    }
  }

  .title {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
  }

  .title-color {
    color: var(--c-right-side-header-text);
  }

  .select-text {
    margin-top: 16px;
    margin-bottom: 24px;

    .option {
      display: flex;
      padding: 5px 0;
      font-size: 14px;
      line-height: 16px;

      & + .option {
        margin-top: 16px;
      }

      svg {
        margin-top: 3.5px;
        margin-right: 8px;
        min-width: 16px;
        width: 16px;
        height: 16px;
      }

      .text {
        display: flex;
        flex-direction: column;

        .title {
          margin-bottom: 8px;
        }
      }
    }
  }
}
</style>
