<template>
  <v-card width="100%" variant="outlined" border="thin" rounded="lg">
    <v-toolbar density="compact" class="px-3 border-b-sm" color="transparent">
      <template #prepend>
        <slot name="title">Title</slot>
      </template>

      <template #append>
        <v-row no-gutters justify="end" align="center">
          <slot name="action-button"></slot>
        </v-row>
      </template>

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

    <v-data-table
      v-model="selected"
      :headers="props.headers"
      :items="props.items"
      item-value="_id"
      items-per-page="20"
      fixed-header
      hide-default-footer
      selec
      :loading="props.loading"
      @click:row="handleRowClick"
      :style="`max-height:${props.height}`"
      :class="{ 'clickable-rows': props.clickableRows }"
    >
      <template v-if="$slots.item" v-slot:item>
        <slot name="item" :items="props.items"></slot>
      </template>

      <template v-slot:item="{ item }">
        <tr @click="handleRowClick(item)">
          <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>
    <v-toolbar density="compact" class="px-3 border-t-sm" color="transparent">
      <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>
        </v-row>
      </template>

      <template v-if="$slots.extension" v-slot:extension>
        <slot name="extension"></slot>
      </template>
    </v-toolbar>
  </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",
  },
  clickableRows: {
    type: Boolean,
    default: false,
  },
});

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 handleRowClick(item: any) {
  if (props.clickableRows) {
    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>

<style scoped>
.clickable-rows tbody tr {
  cursor: pointer;
}

.clickable-rows tbody tr:hover {
  background-color: #f5f5f5;
}
</style>
