<template>
  <v-row no-gutters>
    <!-- Top Actions -->
    <v-col cols="12" class="mb-2" v-if="canCreate || $slots.actions">
      <v-row no-gutters>
        <slot name="actions">
          <v-col cols="12">
            <v-row no-gutters class="ga-2">
              <v-btn
                v-if="canCreate"
                class="text-none"
                rounded="pill"
                variant="tonal"
                size="large"
                @click="emits('create')"
              >
                {{ createLabel }}
              </v-btn>
              <v-text-field
                v-if="canSearch"
                v-model="searchInput"
                density="compact"
                placeholder="Search"
                clearable
                max-width="300"
                append-inner-icon="mdi-magnify"
                hide-details
              />
              <v-btn
                v-if="canScanVisitorQRCode"
                text="Scan QR Code"
                class="text-none ml-2"
                rounded="pill"
                variant="tonal"
                size="large"
                @click="emits('scan')"
              />
            </v-row>
          </v-col>
        </slot>
      </v-row>
    </v-col>

    <!-- Table Card -->
    <v-col cols="12">
      <v-card
        width="100%"
        variant="outlined"
        border="thin"
        rounded="lg"
        :loading="loading"
      >
        <!-- Toolbar -->
        <v-toolbar
          density="compact"
          color="grey-lighten-4"
          :extension-height="extensionHeight"
        >
          <template #prepend>
            <v-btn fab icon density="comfortable" @click="emits('refresh')">
              <v-icon>mdi-refresh</v-icon>
            </v-btn>
            <slot name="prepend-additional" />
          </template>

          <template #append>
            <v-row no-gutters justify="end" align="center">
              <span class="mr-2 text-caption text-fontgray">
                {{ pageRange }}
              </span>
              <local-pagination
                v-model="internalPage"
                :length="pages"
                @update:value="emits('update:page', internalPage)"
              />
            </v-row>
          </template>

          <template v-if="$slots.extension" #extension>
            <slot name="extension" />
          </template>
        </v-toolbar>

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

<script lang="ts" setup>
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,
  },
  canCreate: {
    type: Boolean,
    default: false,
  },
  canScanVisitorQRCode: {
    type: Boolean,
    default: false,
  },
  canSearch: {
    type: Boolean,
    default: false,
  },
  createLabel: {
    type: String,
    default: "Add",
  },
  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 --",
  },
  showHeader: {
    type: Boolean,
    default: false,
  },
  extensionHeight: {
    type: Number,
    default: 50,
  },
  offset: {
    type: Number,
    default: 200,
  },
});

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

const searchInput = defineModel("search", { default: "" });

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

<style scoped>
.v-data-table :deep(thead th) {
  font-weight: bold !important;
}
</style>
