<template>
  <v-card
    width="100%"
    variant="outlined"
    border="thin"
    rounded="lg"
    :loading="loading"
    class="table-v3"
  >
    <v-toolbar density="compact" color="grey-lighten-5">
      <template #prepend>
        <v-btn
          icon
          variant="text"
          density="comfortable"
          class="table-v3__refresh-btn"
          @click="emit('refresh')"
        >
          <v-icon size="28" color="black">mdi-history</v-icon>
        </v-btn>
      </template>

      <template #append>
        <v-row no-gutters justify="end" align="center">
          <span class="mr-2 text-caption text-fontgray">
            {{ pageRange }}
          </span>
          <v-btn
            icon="mdi-chevron-left"
            variant="text"
            density="comfortable"
            :disabled="!canGoPrev"
            @click="goPrev"
          />
          <v-btn
            icon="mdi-chevron-right"
            variant="text"
            density="comfortable"
            :disabled="!canGoNext"
            @click="goNext"
          />
        </v-row>
      </template>
    </v-toolbar>

    <div v-if="$slots.breadcrumb" class="table-v3__breadcrumb">
      <slot name="breadcrumb" />
    </div>

    <v-data-table
      :headers="headers"
      :items="items"
      :item-value="itemValue"
      :items-per-page="itemsPerPage"
      fixed-header
      hide-default-footer
      :style="`max-height: calc(100vh - (${offset}px))`"
      @click:row="(_: any, data: any) => emit('row-click', data.item)"
    >
      <template v-for="(_, slotName) in $slots" #[slotName]="slotProps">
        <slot :name="slotName" v-bind="slotProps" />
      </template>
    </v-data-table>

    <v-toolbar density="compact" color="grey-lighten-5" class="table-v3__footer">
      <template #append>
        <v-row no-gutters justify="end" align="center">
          <span class="mr-2 text-caption text-fontgray">
            {{ pageRange }}
          </span>
          <v-btn
            icon="mdi-chevron-left"
            variant="text"
            density="comfortable"
            :disabled="!canGoPrev"
            @click="goPrev"
          />
          <v-btn
            icon="mdi-chevron-right"
            variant="text"
            density="comfortable"
            :disabled="!canGoNext"
            @click="goNext"
          />
        </v-row>
      </template>
    </v-toolbar>
  </v-card>
</template>

<script setup lang="ts">
const props = defineProps({
  headers: {
    type: Array as PropType<Array<Record<string, any>>>,
    required: true,
  },
  items: {
    type: Array as PropType<Array<Record<string, any>>>,
    default: () => [],
  },
  loading: {
    type: Boolean,
    default: false,
  },
  itemValue: {
    type: String,
    default: "_id",
  },
  itemsPerPage: {
    type: Number,
    default: 20,
  },
  page: {
    type: Number,
    default: 1,
  },
  pages: {
    type: Number,
    default: 0,
  },
  pageRange: {
    type: String,
    default: "-- - -- of --",
  },
  offset: {
    type: Number,
    default: 220,
  },
});

const emit = defineEmits(["refresh", "update:page", "row-click"]);

const internalPage = ref(props.page);
const canGoPrev = computed(() => internalPage.value > 1);
const canGoNext = computed(
  () => props.pages > 0 && internalPage.value < props.pages
);

function goPrev() {
  if (!canGoPrev.value) {
    return;
  }
  internalPage.value -= 1;
  emit("update:page", internalPage.value);
}

function goNext() {
  if (!canGoNext.value) {
    return;
  }
  internalPage.value += 1;
  emit("update:page", internalPage.value);
}

watch(
  () => props.page,
  (val) => {
    internalPage.value = val;
  }
);
</script>

<style scoped>
.table-v3 :deep(thead th) {
  background-color: #f5f5f5;
  color: #6b7280;
  font-weight: 600 !important;
  font-size: 12px;
}

.table-v3 :deep(tbody td) {
  height: 54px;
}

.table-v3__footer {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.table-v3__refresh-btn {
  width: 38px;
  height: 38px;
}

.table-v3__breadcrumb {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background-color: #fff;
  padding: 6px 12px;
}
</style>