<template>
  <q-tr
    v-if="props.showAdvancedFilters"
    class="tr-headerFilter"
  >
    <q-th v-if="selection !== 'none'" />
    <q-th
      v-for="col in cols"
      :key="col.name"
    >
      <div
        style="
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          min-width: 7rem;
        "
      >
        <SelectFilter
          v-if="col.type === 'option'"
          v-model:advanced-filters="advancedFilters"
          :options="(getFormattedOptions(col) as string[])"
          :col="col"
        />
        <SelectFilter
          v-if="col.type === 'select'"
          v-model:advanced-filters="advancedFilters"
          :options="col.selectOptions || (getColumnOptions(col.name) as string[])"
          :col="col"
        />
        <TextFilter
          v-if="col.type === 'string' || col.type === 'textarea' || col.type === 'dateTime'"
          v-model:advanced-filters="advancedFilters"
          :col="col"
        />
        <NumberFilter
          v-if="col.type === 'number' || col.type === 'decimal'"
          v-model:advanced-filters="advancedFilters"
          :col="col"
        />
        <CheckboxFilter
          v-if="col.type === 'boolean'"
          v-model:advanced-filters="advancedFilters"
          :col="col"
        />
        <DateFilter
          v-if="col.type === 'date'"
          v-model:advanced-filters="advancedFilters"
          :col="col"
        />
      </div>
    </q-th>
  </q-tr>
</template>
<script setup lang="ts">
import { KettalQTableColumn, KettalTableAdvancedFilters, TableRow } from '@/types'
import { actionType } from '../../hooks/tableAction'
import SelectFilter from './KTableAdvancedFilters/SelectFilter.vue'
import TextFilter from './KTableAdvancedFilters/TextFilter.vue'
import NumberFilter from './KTableAdvancedFilters/NumberFilter.vue'
import CheckboxFilter from './KTableAdvancedFilters/CheckboxFilter.vue'
import DateFilter from './KTableAdvancedFilters/DateFilter.vue'

const advancedFilters = defineModel<KettalTableAdvancedFilters>('advancedFilters', { type: Object, required: true })
const props = defineProps<{
  rows: TableRow[],
  showAdvancedFilters: boolean,
  action: actionType,
  cols: KettalQTableColumn[],
  selection: 'single' | 'multiple' | 'none'

}>()

/**
 * This function creates a set of all values in the desired column to be used as options in a q-select component
 *
 * @param {string} col Column to get options form
 *
 * @public
 *
 */
function getColumnOptions (col: string) {
  // Extract the values for the given key from each object in the list
  const values = props.rows.map((row) => row[col])

  // Create a Set to store unique values
  const uniqueValuesSet = new Set(values)
  const options = Array.from(uniqueValuesSet)
  // Convert the Set back to an array and return it
  return options
}
/**
 * This function creates a set of all values in the desired column to be used as options in a q-select component
 * but if the column has a selectOptionsFormat function, it will use that function to format the options, this
 * is used for changing the display value but keeping the value the same
 *
 * @param {string} col Column to get options form
 *
 * @public
 *
 */
function getFormattedOptions (col: KettalQTableColumn) {
  if (col.selectOptionsFormat) {
    return getColumnOptions(col.name).map((val) => {
      // QSelect automatically shows the label if it it exists in the options
      return {
        label: col.selectOptionsFormat ? col.selectOptionsFormat(val as string) : val,
        value: val
      }
    })
  } else {
    return getColumnOptions(col.name)
  }
}

</script>
