<script setup lang="ts">
import { watchEffect } from 'vue'
import { VDataTable } from 'vuetify/labs/VDataTable'

const props = defineProps({
  item: String,
})

const { t } = useI18n()

const route = useRoute('store-details')
const isLoading = ref(false)

// Data table options
const options = ref({ page: 1, itemsPerPage: 10, sortBy: [''], sortDesc: [false] })

const fetchedData = ref<Array<Record<string, unknown>>>([])

const fetchData = async () => {
  isLoading.value = true

  const { data } = await useApi<any>(createUrl(`/items/${props.item}/price?dbHost=${route.query.dbHost}`))

  fetchedData.value = data.value.map((item: any) => ({
    ...item,
    level: `${item.levelCode}:${item.levelValue}`,
  }))

  isLoading.value = false
}

watchEffect(() => {
  // eslint-disable-next-line sonarjs/no-collapsible-if
  if (props.item)
    // eslint-disable-next-line curly
    if (!(props.item.trim() === ''))
      fetchData()
})

// const { t } = useI18n()

const headers = computed(() => [
  { title: t('ITEM_ID'), key: 'itemId' },
  { title: t('LEVEL'), key: 'level' },
  { title: t('TYPE'), key: 'itmPricePropertyCode' },
  { title: t('EFFECTIVE DATE'), key: 'effectiveDate' },
  { title: t('EXPIRATION DATE'), key: 'expirationDate' },
  { title: t('PRICE'), key: 'price' },
  { title: 'EXTERNAL ID', key: 'externalId' },
  { title: t('DATE_CREATE'), key: 'createDate' },
  { title: t('USER_CREATE'), key: 'createUserId' },
  { title: t('DATE_UPDATE'), key: 'updateDate' },
  { title: t('USER_UPDATE'), key: 'updateUserId' },
])
</script>

<template>
  <div>
    <VCol>
      <div v-if="isLoading">
        <VProgressCircular
          indeterminate
          color="primary"
        />
      </div>
      <VDataTable
        v-else
        :headers="headers"
        :items="fetchedData"
        :items-per-page="options.itemsPerPage"
        :page="options.page"
        :options="options"
        density="compact"
      />
    </VCol>
  </div>
</template>
