<template>
  <div v-if="totalPages > 0 && !fullMode" class="page-nav" data-element="pageNavOverlay">
    <Button
      className="side-arrow-container"
      img="icon-previous-left"
      :title="isFirstPage ? null : $t('previousPage')"
      :onClick="goToPrevPage"
      :disabled="isFirstPage"
    >
      <ArrowPrev />
    </Button>
    <div class="form-container">
      <input
        type="number"
        v-model="pageValue"
        @input="onChange"
        @blur="goToPage"
        @keydown.enter="goToPage"
        tabIndex=-1
        :style="{ width: pageValue.toString().length * 8 + 2 + 'px' }"
        pattern="\d*"
        onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
        name="page-nav"
      />
      <span>{{ `/${totalPages}` }}</span>
    </div>
    <Button
      className="side-arrow-container"
      img="icon-next-right"
      :title="isLastPage ? null : $t('nextPage')"
      @click="goToNextPage"
      :disabled="isLastPage"
    >
      <ArrowNext />
    </Button>
  </div>
</template>

<script setup>
  import { ref, computed, watch, effect } 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 pageValue = ref(useViewer.getCurrentPage)

  effect(() => pageValue.value = useViewer.getCurrentPage)

  const fullMode = computed(() => useViewer.getFullMode)

  const isFirstPage = computed(() => {
    return useViewer.getCurrentPage === 1
  })

  const totalPages = computed(() => useDocument.getTotalPages)

  const isLastPage = computed(() => {
    return totalPages.value === useViewer.getCurrentPage
  })

  watch(pageValue, (value, prev) => {
    if (value !== '' && totalPages.value !== 0 && (value > totalPages.value || value <= 0)) {
      pageValue.value = prev
    }
  })
  const goToPrevPage = () => {
    const previousFlag = core.previousPage()
    if (previousFlag) {
      useViewer.setCurrentPage(core.getCurrentPage())
    }
  }

  const goToNextPage = () => {
    const nextFlag = core.nextPage()
    if (nextFlag) {
      useViewer.setCurrentPage(core.getCurrentPage())
    }
  }
  const goToPage = (event) => {
    event.target.blur()
    if (!event.target.value) {
      pageValue.value = useViewer.getCurrentPage
      return
    }
    core.pageNumberChanged(event.target)
  }

  const handleBlur = () => {
    pageValue.value = useViewer.getCurrentPage
  }
</script>

<style lang="scss">
  .page-nav {
    position: fixed;
    bottom: 20px;
    left: 50%;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transform: translateX(-50%);
    min-width: 100px;
    height: 36px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 2px;
    transition: left 0.3s ease-in-out;
    .button {
      color: #FFF;
      padding: 0;
      margin: 0;
      &:hover, &:active {
        background-color: transparent;
      }
    }
  }
  .form-container {
    display: flex;
    align-items: center;
    margin: 0 10px;
    input {
      min-width: 8px;
      line-height: 16px;
      font-size: 16px;
      padding: 0;
      text-align: right;
      color: rgb(36, 42, 51);
      background-color: transparent;
      outline: none;
      border: none;
      color: #FFF;
      box-sizing: border-box;
      border-bottom: 1px solid #FFF;
      text-align: center;
      -moz-appearance: textfield;
      &::-webkit-inner-spin-button {
        -webkit-appearance: none;
      }
    }
    span {
      display: inline-block;
      font-size: 14px;
      line-height: 16px;
      color: #FFF;
      white-space: nowrap;
    }
  }
</style>
