<script setup>
import { ref } from 'vue';
import AisTable from '@/components/table/AisTable.vue'
import AisRadioGroup from "@/components/radio-group/AisRadioGroup.vue";
import AisCheckbox from "@/components/checkbox/AisCheckbox.vue";

const size = ref('')
const headVariant = ref('')
const striped = ref(false)
const bordered = ref(false)
const borderless = ref(false)
const outlined = ref(false)
const hover = ref(false)
const footClone = ref(false)
const sizes = ref([
  { value: '',   label: 'Default' },
  { value: 'sm', label: 'Small' },
  { value: 'lg', label: 'Large' },
])
const headVariantOptions = ref([
  { value: '', label: 'None' },
  { value: 'primary', label: 'Primary' },
  { value: 'secondary', label: 'Secondary' },
])

const fields = ref([
  { key: 'hawkId', label: 'Hawk ID', sortable: true },
  { key: 'univId', label: 'Univ ID', sortable: true, class: 'text-center' },
  { key: 'firstName', label: 'First Name', sortable: true },
  { key: 'lastName', label: 'Last Name', sortable: true },
  { key: 'email', label: 'Email', sortable: true, class: 'whitespace-nowrap' },
  { key: 'hireDate', label: 'Hire Date', sortable: true, class: 'text-center whitespace-nowrap' },
])
const items = ref([
  { "id": 7032,"hawkId": "cyepiskov0", "univId": "00549444", "firstName": "Chancey", "lastName": "Yepiskov", "fullName": "Chancey Yepiskov", "email": "chancey-yepiskov@uiowa.edu", "hireDate": "05/09/1990", "retired": false,"inactive": true },
  { "id": 2701,"hawkId": "beyden1", "univId": "00120802", "firstName": "Beaufort", "lastName": "Eyden", "fullName": "Beaufort Eyden", "email": "beaufort-eyden@uiowa.edu", "hireDate": "06/05/1998", "retired": false,"inactive": false },
  { "id": 9380,"hawkId": "fstokey2", "univId": "00341804", "firstName": "Franky", "lastName": "Stokey", "fullName": "Franky Stokey", "email": "franky-stokey@uiowa.edu", "hireDate": "06/11/1993", "retired": false,"inactive": true },
  { "id": 8167,"hawkId": "mloisi3", "univId": "00769787", "firstName": "Maximilien", "lastName": "Loisi", "fullName": "Maximilien Loisi", "email": "maximilien-loisi@uiowa.edu", "hireDate": "01/02/1996", "retired": false,"inactive": false },
  { "id": 3167,"hawkId": "ckunkler4", "univId": "00580573", "firstName": "Cyrillus", "lastName": "Kunkler", "fullName": "Cyrillus Kunkler", "email": "cyrillus-kunkler@uiowa.edu", "hireDate": "06/30/1990", "retired": false,"inactive": false },
])
</script>

<template>
  <div>
    <div class="grid grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-4">
      <div class="whitespace-nowrap">Table Options</div>
      <div class="col-span-3 lg:col-span-5 xl:col-span-7">
        <div class="flex flex-wrap gap-x-4 gap-y-1">
          <AisCheckbox v-model="striped" size="sm">Striped</AisCheckbox>
          <AisCheckbox v-model="hover" size="sm">Hover</AisCheckbox>
          <AisCheckbox v-model="bordered" size="sm">Bordered</AisCheckbox>
          <AisCheckbox v-model="borderless" size="sm">Borderless</AisCheckbox>
          <AisCheckbox v-model="outlined" size="sm">Outlined</AisCheckbox>
          <AisCheckbox v-model="footClone" size="sm">Foot Clone</AisCheckbox>
        </div>
      </div>

      <div class="whitespace-nowrap">Table Sizes</div>
      <div class="col-span-3 lg:col-span-5 xl:col-span-7">
        <AisRadioGroup v-model="size"
                       :options="sizes"
                       name="tableSizes"
                       size="sm"
        />
      </div>

      <div class="whitespace-nowrap">Head Variant</div>
      <div class="col-span-3 lg:col-span-5 xl:col-span-7">
        <AisRadioGroup v-model="headVariant"
                       :options="headVariantOptions"
                       name="headVariants"
                       size="sm"
        />
      </div>
    </div>

    <AisTable :fields="fields"
              :items="items"
              :striped="striped"
              :bordered="bordered"
              :borderless="borderless"
              :outlined="outlined"
              :size="size"
              :hover="hover"
              :footClone="footClone"
              :head-variant="headVariant"
    ></AisTable>
  </div>
</template>