<template>
  <div class="settings-popup">
    <Dialog :show="show">
      <p class="title">{{ $t('header.settings.settings') }}</p>
      <div class="container">
        <div class="info">
          <div class="row">
            <span>{{ $t('header.settings.author') }}</span>
            <input type="text" placeholder="ComPDFKit" v-model="authorInput" name="settings">
          </div>
          <div class="row">
            <span>{{ $t('header.settings.annotator') }}</span>
            <input type="text" placeholder="Guest" v-model="annotatorInput" name="settings">
          </div>
          <div class="row">
            <span>{{ $t('header.settings.language') }}</span>
            <div class="select-box">
              <select name="language" v-model="selectedLanguage">
                <option value="en">English</option>
                <option value="zh-CN">简体中文</option>
              </select>
              <ArrowDownA />
            </div>
          </div>
        </div>
        <div class="row">
          <span>{{ $t('header.settings.highlightLink') }}</span>
          <div class="controller"><n-switch v-model:value="highlightLink" /></div>
        </div>
        <div class="row">
          <span>{{ $t('header.settings.highlightForm') }}</span>
          <div class="controller"><n-switch v-model:value="highlightForm" /></div>
        </div>
      </div>

      <p class="title">{{ $t('header.settings.creationInfo') }}</p>
      <div class="version row">
        <span>{{ $t('header.settings.version') }}</span>
        <span>2.5.1</span>
      </div>

      <template #footer>
        <div class="rect-button white" @click="handleClose">{{ $t('cancel') }}</div>
        <div class="rect-button blue" :class="{ disabled: !isChanged }" @click="handleSettings">{{ $t('documentEditor.save') }}</div>
      </template>
    </Dialog>
  </div>
</template>

<script setup>
  import { computed, ref, watch } from 'vue'
  import { useI18n } from 'vue-i18n'
  import { useViewerStore } from '@/stores/modules/viewer'
  import { useDocumentStore } from '@/stores/modules/document'
  import { NSwitch } from 'naive-ui'
  const { locale } = useI18n()

  const useViewer = useViewerStore()
  const useDocument = useDocumentStore()
  const authorInput = ref(useDocument.getAuthor)
  const annotatorInput = ref(useDocument.getAnnotator)

  const show = computed(() => useViewer.isElementOpen('settingsDialog'))
  const author = computed(() => useDocument.getAuthor)
  const annotator = computed(() => useDocument.getAnnotator)
  const selectedLanguage = ref(locale.value)
  const highlightLink = ref(true)
  const highlightForm = ref(true)
  const isChanged = ref(false)

  watch(() => show.value, (newVal, oldVal) => {
    if (newVal) {
      highlightLink.value = useDocument.getHighlightLink
      highlightForm.value = useDocument.getHighlightForm
      isChanged.value = false
    }
  })

  watch(author, (newVal, oldVal) => {
    authorInput.value = newVal
  })

  watch(annotator, (newVal, oldVal) => {
    annotatorInput.value = newVal
  })

  watch([authorInput, annotatorInput, selectedLanguage, highlightLink, highlightForm], (newValues, oldValues) => {
    if (newValues[0] !== useDocument.getAuthor ||
      newValues[1] !== useDocument.getAnnotator ||
      newValues[2] !== locale.value ||
      newValues[3] !== useDocument.getHighlightLink ||
      newValues[4] !== useDocument.getHighlightForm) {
      isChanged.value = true
    } else {
      isChanged.value = false
    }
  })
  
  const handleClose = () => {
    useViewer.closeElement('settingsDialog')
    selectedLanguage.value = locale.value
  }

  const handleSettings = () => {
    locale.value = selectedLanguage.value
    window.localStorage.setItem('language', selectedLanguage.value)
    useViewer.closeElement('settingsDialog')
    useDocument.setAuthor(authorInput.value ? authorInput.value : 'ComPDFKit')
    useDocument.setAnnotator(annotatorInput.value ? annotatorInput.value : 'Guest')
    useDocument.setHighlightLink(highlightLink.value)
    useDocument.setHighlightForm(highlightForm.value)
  }
</script>

<style lang="scss">
.settings-popup {
  .dialog-container {
    width: 400px;
    box-shadow: 0px 4px 32px 0px var(--c-doc-editor-popup-shadow);

    main {
      margin: 0;
    }
  }

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

  .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 30px;

    & + .row {
      margin-top: 8px;
    }
  }

  .container {
    margin-top: 16px;
    margin-bottom: 24px;
    padding: 16px;
    border-radius: 4px;
    background: var(--c-toolbar-bg);

    .info {
      margin-bottom: 16px;
      padding-bottom: 20px;
      border-bottom: 1px solid var(--c-right-side-content-fillbox-border);
    }

    select,
    input {
      padding: 0 20px 0 8px;
      width: 200px;
      height: 30px;
      background: var(--c-right-side-content-fillbox-bg);
      border: 1px solid var(--c-right-side-content-fillbox-border);
      border-radius: 1px;
      line-height: 16px;
      color: var(--c-text);
    }

    input {
      font-size: 16px;
      &::placeholder {
        font-size: 14px;
        color: var(--c-settings-text);
      }
    }

    input:focus {
      border-color: #0078D7;
    }

    select {
      font-size: 14px;
      color: var(--c-settings-text);
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
    }
    
    .select-box {
      position: relative;
      display: flex;
      align-items: center;
      
      span {
        white-space: nowrap;
        font-size: 14px;
        line-height: 16px;
      }

      svg {
        position: absolute;
        right: 4px;
        pointer-events: none;
      }
    }
  }

  .version {
    margin: 16px 0;
    padding-right: 5px;
  }

  .controller {
    .n-switch {
      .n-switch__rail {
        min-width: 44px;
        height: 24px;
        border-radius: 100px;
        background-color: hsl(219, 100%, 93%);

        .n-switch__button {
          top: 4px;
          left: 4px;
          width: 16px;
          height: 16px;
        }
      }

      &.n-switch--active .n-switch__rail {
        background-color: #1460F3;
      }

      &.n-switch--active .n-switch__rail .n-switch__button {
        left: calc(100% - 16px - 4px);
      }

      &:focus .n-switch__rail {
        box-shadow: none;
      }
    }
  }
}
</style>
