<template>
  <div v-show="isModalVisible" class="password-container">
    <ModalContainer :onCloseClick="closeSetPassword">
      <Lock class="lock-icon" />
      <!-- <Lockup v-show="visible" class="lock-icon" /> -->
      <div class="password-title">{{ $t('passwordDialog.encryptPdf') }}</div>
      <div class="input-container">
        <input :type="visible ? 'text' : 'password'" name="password" v-model="password" maxlength="20" :placeholder="$t('passwordDialog.enterPwdPlaceholder')">
        <span class="eye-btn" @click="visible = !visible">
          <EyesVisible v-if="visible" />
          <EyesInvisible v-else />
        </span>
      </div>
      <div v-show="wrongPassword" class="wrong-password">
        <p>{{ $t('passwordDialog.supportTip') }}</p>
      </div>
      <span class="set-btn" :class="{ 'disabled': !password }" @click="setPassword">{{ $t('passwordDialog.encrypt') }}</span>
      <div class="note">
        <p>{{ $t('passwordDialog.note[0]') }}</p>
        <p>{{ $t('passwordDialog.note[1]') }}</p>
        <p>{{ $t('passwordDialog.note[2]') }}</p>
      </div>
    </ModalContainer>
  </div>
</template>

<script setup>
  import { computed, ref, h, watch, getCurrentInstance } from 'vue';
  import { useViewerStore } from '@/stores/modules/viewer'
  import core from '@/core'
  import MessageError from '@/assets/icons/icon-message-error.svg'
  import MessageSuccess from '@/assets/icons/icon-message-success.svg'

  const instance = getCurrentInstance().appContext.app.config.globalProperties

  const useViewer = useViewerStore()
  const visible = ref(false)
  const password = ref('')
  const loading = ref(false)
  const wrongPassword = ref(false)

  const isModalVisible = computed(() => useViewer.isElementOpen('setPasswordModal'))

  watch(() => password.value, (newValue, oldValue) => {
    if (newValue) {
      newValue = newValue.replace(/\s/g, '')
      newValue = newValue.replace(/[^a-zA-Z0-9!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~]/, '')
      newValue = newValue.replace(/[\u4e00-\u9fa5\uFE30-\uFFA0]/, '')
      password.value = newValue
    }
    if (newValue.length) {
      wrongPassword.value = false
    }
  })

  const closeSetPassword = () => {
    useViewer.closeElement('setPasswordModal')
    visible.value = false
    password.value = ''
    wrongPassword.value = false
  }
  const setPassword = async () => {
    if (!password.value.length || loading.value) return
    if (!filteredPassword()) {
      wrongPassword.value = true
      return
    } else {
      wrongPassword.value = false
    }
    loading.value = true
    const data = await core.setPassword(password.value)
    closeSetPassword()
    if (!data) {
      window.$message.error(instance.$t('passwordDialog.setPwdFailure'), {
        duration: 3000,
        icon: () => h('img', { src: MessageError })
      })
    } else {
      window.$message.success(instance.$t('passwordDialog.setPwdSuccess'), {
        duration: 3000,
        icon: () => h('img', { src: MessageSuccess })
      })
    }
    loading.value = false
  }
  const filteredPassword = () => {
    const regex = /^(?=.*[a-zA-Z]+$|.*\d+$|.*[@$!%*?&]+$)[a-zA-Z\d@$!%*?&]{1,20}$/
    return regex.test(password.value)
  }
</script>

<style lang="scss">
  .password-container {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    .modal-container {
      width: 284px;
    }
    .lock-icon {
      color: var(--c-popup-bg-active);
    }
    .password-title {
      margin-top: 8px;
      font-size: 16px;
      font-weight: bold;
      line-height: 18px;
    }
    .input-container {
      width: 100%;
      position: relative;
      margin-top: 30px;
      input {
        width: 100%;
        height: 24px;
        border: 1px solid rgba(0, 0, 0, 0.12);
        border-color: var(--c-side-header-border);
        border-radius: 1px;
        font-size: 16px;
        color: var(--c-text);
        padding: 4px 24px 4px 8px;
        background-color: var(--c-side-header-bg);
        &::placeholder {
          font-size: 14px;
          color: var(--c-text);
          opacity: 0.6;
        }
      }
      .eye-btn {
        position: absolute;
        right: 4px;
        top: 4px;
        cursor: pointer;
        color: var(--c-side-outline-text);
      }
    }
    .wrong-password {
      margin-top: 4px;
      margin-bottom: -22px;
      font-size: 12px;
      line-height: 16px;
      color: rgba(255, 0, 0, 1);
      align-self: flex-start;
    }
    .set-btn {
      display: flex;
      width: 100%;
      justify-content: center;
      align-items: center;
      margin-top: 40px;
      padding: 12px 0;
      font-size: 14px;
      line-height: 16px;
      font-weight: bold;
      border-radius: 4px;
      color: #FFF;
      cursor: pointer;
      background-color: var(--c-popup-bg-active);
    }
    .note {
      margin-top: 20px;
      font-size: 12px;
      color: var(--c-text);
      opacity: 0.6;
    }
  }
</style>
