<script setup>
import { ref } from 'vue';
import AisTable from '@/components/table/AisTable.vue'
import AisModal from '@/components/modal/AisModal.vue'
import AisButton from '@/components/button/AisButton.vue'


const showBodyScopedPropsModal = ref(false)
const showEmptyScopedPropsModal = ref(false)
const showHeadFootScopedPropsModal = ref(false)

const fields = ref([
  { key: 'name', label: 'Name' },
  { key: 'scoped', label: 'Scoped', class: 'text-center' },
  { key: 'descr', label: 'Description'},
])
const items = ref([
  { name: 'body()', scoped: 'body', descr: 'Default scoped slot for custom data rendering of field data. See docs for scoped data' },
  { name: 'body({key})', scoped: 'body', descr: 'Scoped slot for custom data rendering of field data. \'{key}\' is the field\'s key name. See docs for scoped data' },
  { name: 'caption', scoped: 'No', descr: 'Content to display in the table\'s caption element' },
  { name: 'empty', scoped: 'empty', descr: 'Content to display when no items are present in the `items` array. Optionally scoped' },
  { name: 'emptyFiltered', scoped: 'empty', descr: 'Content to display when no items are present in the filtered `items` array. Optionally scoped' },
  { name: 'foot()', scoped: 'foot', descr: 'Default scoped slot for custom rendering of field footer. See docs for scoped footer' },
  { name: 'foot({key})', scoped: 'foot', descr: 'Scoped slot for custom rendering of field footer. \'{key}\' is the field\'s key name. See docs for scoped footer' },
  { name: 'head()', scoped: 'head', descr: 'Default scoped slot for custom rendering of field header. See docs for scoped header' },
  { name: 'head({key})', scoped: 'head', descr: 'Scoped slot for custom rendering of field header. \'{key}\' is the field\'s key name. See docs for scoped header' },
  { name: 'table-busy', scoped: 'No', descr: 'Optional slot to place loading message when table is in the busy state' },
])

const scopeFields = ref([
  { key: 'property', label: 'Property' },
  { key: 'type', label: 'Type' },
  { key: 'descr', label: 'Description'},
])

const bodyItems = ref([
  { property: 'field', type: 'Object', descr: 'The field\'s field definition object' },
  { property: 'index', type: 'Number', descr: 'The row number (indexed from zero) relative to the *displayed* rows. Note: index will not always be the actual row\'s index number, as it is computed after filtering, sorting and pagination have been applied to the original table data. The index value will refer to the displayed row number.' },
  { property: 'item', type: 'Object', descr: 'The entire raw record data (i.e. items[index]) for this row (before any formatter is applied)' },
  { property: 'unformatted', type: 'Any', descr: 'The raw value for this key in the item record (null or undefined if a virtual column), before being passed to the field\'s formatter function' },
  { property: 'value', type: 'Any', descr: 'The value for this key in the record (null or undefined if a virtual column), or the output of the field\'s formatter function' },
])

const emptyItems = ref([
  { property: 'emptyFilteredText', type: 'String', descr: 'The value of the empty-filtered-text prop' },
  { property: 'emptyText', type: 'String', descr: 'The value of the empty-text prop' },
  { property: 'fields', type: 'Array', descr: 'The normalized fields definition array (in the array of objects format)' },
  { property: 'items', type: 'Array', descr: 'The items array. Exposed here to check null vs []' },
])

const headFootItems = ref([
  { property: 'field', type: 'Object', descr: 'The field\'s field definition object' },
])

const showModal = (name) => {
  if(name === 'body')
    showBodyScopedPropsModal.value = true
  else if(name === 'empty')
    showEmptyScopedPropsModal.value = true
  else if(name === 'head' || name === 'foot')
    showHeadFootScopedPropsModal.value = true
}
</script>


<template>
  <div>
    <AisTable
        bordered striped sticky-headers
        :fields="fields"
        :items="items"
        table-class="mt-0"
        sticky-top="top-[57px]"
    >
      <template #body(scoped)="{ value }">
        <span v-if="value === 'No'">{{ value }}</span>
        <AisButton v-else size="xs" variant="secondary" alternate rounded font="sans" @click="showModal(value)">Show</AisButton>
      </template>
    </AisTable>

    <AisModal v-model="showBodyScopedPropsModal" title="Slot Scoped Properties" title-class="sr-only" content-class="gap-4" size="lg">
      <div class="flex flex-col gap-0 mt-10">
        <div class="flex flex-row gap-8 justify-between">
          <h3 class="mt-0">Slot Scoped Properties</h3>
          <b>body() & body({key})</b>
        </div>

        <AisTable bordered striped :items="bodyItems" :fields="scopeFields"></AisTable>
      </div>
    </AisModal>

    <AisModal v-model="showEmptyScopedPropsModal" title="Slot Scoped Properties" title-class="sr-only" content-class="gap-4" size="lg">
      <div class="flex flex-col gap-0 mt-10">
        <div class="flex flex-row gap-8 justify-between">
          <h3 class="mt-0">Slot Scoped Properties</h3>
          <b>empty & emptyFiltered</b>
        </div>

        <AisTable bordered striped :items="emptyItems" :fields="scopeFields"></AisTable>
      </div>
    </AisModal>

    <AisModal v-model="showHeadFootScopedPropsModal" title="Slot Scoped Properties" title-class="sr-only" content-class="gap-4" size="lg">
      <div class="flex flex-col gap-0 mt-10">
        <div class="flex flex-row gap-8 justify-between">
          <h3 class="mt-0">Slot Scoped Properties</h3>
          <b>head(), head({key}), foot(), foot({key})</b>
        </div>

        <AisTable bordered striped :items="headFootItems" :fields="scopeFields"></AisTable>
      </div>
    </AisModal>
  </div>
</template>
