<template>
  <div class="list-paging-wrapper">
    <div class="pagination-content">
      <icon-button
        classList="pagination-nav pagination-nav-prev"
        @click="changePage('<')"
        icon="arrow" />
      <div class="pagination-input">
        <input
          type="text"
          class="pagination-current-page"
          :value="pageNumber"
          @keydown="validationStore.allowNumbersWithKeys"
          @keyup="InputPageControl($event)"
          @focus="PageNumberFocus($event)"
          min="1"
          :max="totalPage()" />
      </div>
      <div class="pagination-total-page">
        /
        <span>{{ totalPage() }}</span>
      </div>
      <div class="button-c" @click="getPage">Git</div>
      <icon-button
        classList="pagination-nav pagination-nav-next"
        @click="changePage('>')"
        icon="arrow" />
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ref, onBeforeMount, watch } from 'vue'
  import type { Ref } from 'vue'
  import { useGlobalStore } from '@/stores/globalStore'
  import { useValidationStore } from '@/stores/validationStore'
  import { useRouter, useRoute } from 'vue-router'
  const router = useRouter()
  const route = useRoute()

  const globalStore = useGlobalStore()
  const validationStore = useValidationStore()

  interface IPagination {
    pageNumber: number
    pageSize: number
    totalRecords: number
  }

  export interface Props {
    pagination: IPagination
    isUseRoute?: boolean
  }

  const props = withDefaults(defineProps<Props>(), {
    isUseRoute: false
  })

  const emit = defineEmits(['update:pagination'])

  const localPagination: Ref<IPagination> = ref(props.pagination)
  const pageNumber: Ref<number> = ref(1)

  const totalPage = (): number => {
    return Math.ceil(localPagination.value.totalRecords / globalStore.perPage)
  }

  const changePage = (v: string) => {
    if (v === '<') {
      if (Number(pageNumber.value) > 1) pageNumber.value--
    } else {
      if (Number(pageNumber.value) < totalPage()) pageNumber.value++
    }
    localPagination.value.pageNumber = pageNumber.value
    IfRouteUsing()
    emit('update:pagination', localPagination.value)
  }
  const IfRouteUsing = () => {
    if (props.isUseRoute) {
      router.push({
        query: {
          ...route.query,
          pageNumber: pageNumber.value
        }
      })
    }
  }
  const InputPageControl = (e: Event) => {
    if (Number((e.target as HTMLInputElement).value) < 1)
      (e.target as HTMLInputElement).value = '1'
    if (Number((e.target as HTMLInputElement).value) > totalPage())
      (e.target as HTMLInputElement).value = String(totalPage())
    pageNumber.value = Number((e.target as HTMLInputElement).value)
    if ((e as KeyboardEvent).key === 'Enter') getPage()
  }
  const PageNumberFocus = (e: Event) => {
    ;(e.target as HTMLInputElement).select()
  }
  const getPage = () => {
    localPagination.value.pageNumber = pageNumber.value
    IfRouteUsing()
    emit('update:pagination', localPagination.value)
  }
  const SetPageNumber = () => {
    if (props.isUseRoute) {
      if (route.query.pageNumber !== undefined && route.query.pageNumber !== '') {
        localPagination.value.pageNumber = pageNumber.value = Number(
          route.query.pageNumber
        )
      } else {
        localPagination.value.pageNumber = pageNumber.value = 1
      }
    }
  }
  onBeforeMount(() => {
    SetPageNumber()
  })
  watch(
    () => route.query.pageNumber,
    () => {
      SetPageNumber()
    }
  )
</script>
