<template>
  <v-card
    width="100%"
    variant="outlined"
    border="thin"
    rounded="lg"
    :loading="loading"
  >
    <v-toolbar density="compact" color="grey-lighten-4">
      <template #prepend>
        <v-checkbox v-model="selectAll" hide-details class="mx-1"></v-checkbox>

        <v-btn fab icon density="comfortable" @click="emit('refresh')">
          <v-icon>mdi-refresh</v-icon>
        </v-btn>
      </template>

      <template #append>
        <v-row no-gutters justify="end" align="center">
          <span class="mr-2 text-caption text-fontgray">
            {{ props.pageRange }}
          </span>
          <div class="arrow-navigation">
            <v-btn
              icon="mdi-chevron-left"
              variant="text"
              density="comfortable"
              :disabled="page <= 1"
              @click="decrement"
            />
            <v-btn
              icon="mdi-chevron-right"
              variant="text"
              density="comfortable"
              :disabled="page >= props.length"
              @click="increment"
            />
          </div>
          <slot name="action-button"></slot>
        </v-row>
      </template>

      <template v-if="$slots.extension" v-slot:extension>
        <slot name="extension"></slot>
      </template>
    </v-toolbar>
    <div :style="{ overflowY: 'auto', height }">
      <v-data-table
        v-model="selected"
        :headers="props.headers"
        :items="props.items"
        item-value="_id"
        items-per-page="20"
        show-select
        fixed-header
        hide-default-footer
        hide-default-header
        :max-height="props.height"
        :loading="props.loading"
        @click:row="tableRowClickHandler"
      >
        <template v-if="$slots.item" v-slot:item>
          <slot name="item" :items="props.items"></slot>
        </template>

        <template v-slot:item="{ item }">
          <tr>
            <td v-for="col in props.headers" :key="col.value">
              <slot :name="col.value" :item="item">
                {{ item[col.value] }}
              </slot>
            </td>
          </tr>
        </template>
      </v-data-table>
    </div>
  </v-card>
</template>

<script setup lang="ts">
const selected = defineModel({
  type: Array as PropType<Array<string>>,
  default: () => [],
});
const page = defineModel("page", { type: Number, default: 0 });

const props = defineProps({
  headers: {
    type: Array as PropType<Array<Record<string, string>>>,
    required: true,
    default: () => [],
  },
  items: {
    type: Array as PropType<Array<Record<string, any>>>,
    required: true,
    default: () => [],
  },
  pages: {
    type: Number,
    required: true,
    default: 0,
  },
  pageRange: {
    type: String,
    required: true,
    default: "-- - -- of --",
  },
  length: {
    type: Number,
    required: true,
    default: 0,
  },
  loading: {
    type: Boolean,
    required: true,
    default: true,
  },
  height: {
    type: String,
    default: "500px",
  },
});

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

function increment() {
  page.value++;
  emit("update:pagination", page.value);
}

function decrement() {
  page.value--;
  emit("update:pagination", page.value);
}

function tableRowClickHandler(_: any, row: any) {
  const item = props.items[row.index];
  emit("row-click", item);
}

const selectAll = ref(false);

watch(selectAll, (curr) => {
  selected.value.splice(0, selected.value.length);
  if (curr) {
    const ids = props.items.map((i) => i._id as string);
    selected.value.push(...ids);
  }
});
</script>
