<template>
  <q-page-container class="column justify-center">
    <q-page class="column justify-center align-center items-center">
      <div style="height: 800px; width: 1500px;">
        <k-table
          v-model:visible-columns="visibleColumns"
          v-model:selected="selected"
          :table-actions="tableActions"
          :table-loading="tableLoading"
          :columns="columns"
          :rows="rows"
          :row-key="rowKey"
          :start-sorted-by="startSortedBy"
          :custom-style-row="(row: any) => {
            if(row.age as number > 30) {
              return 'color: red;'
            }
          }"
          @call-function="(props) => {
            console.log(props)
            console.log(selected)
          }"
          @open-popup="(props) => {
            console.log(props)
            console.log(selected)
          }"
          @update-table-value="(newValue, oldValue, row, col) => {
            console.log(newValue, oldValue, row, col)
          }"
        />
      </div>
    </q-page>
  </q-page-container>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import KTable from '@/components/KTable/KTable.vue'
import { rows as testData } from '@/testData.js'
import { KettalPageActions, KettalQTableColumn, KettalVisibleColumn, KettalColumnSort } from '@/types/KTable'
import { TableRow } from '@/components/KTable/types.js'
const selected = ref<TableRow[]>([])
const rows = ref<TableRow[]>(testData)
const rowKey = ref<string[] | string>('name')
const tableLoading = ref<boolean>(false)
const startSortedBy = ref<KettalColumnSort[]>()
const tableActions = ref<KettalPageActions[]>([
  {
    title: 'nonePopup',
    selection: 'none',
    type: 'popup',
    popupName: 'nonePopup'
  },
  {
    title: 'singleFunction',
    selection: 'single',
    type: 'function',
    functionName: 'singleFunction'
  },
  {
    title: 'expandButton',
    type: 'expand',
    content: [{
                title: 'singlePopup',
                selection: 'single',
                type: 'popup',
                popupName: 'singlePopup'
              }, {
                title: 'noneFunction',
                selection: 'none',
                type: 'function',
                functionName: 'noneFunction'
              },
              {
                title: 'multiplePopup',
                selection: 'multiple',
                type: 'popup',
                popupName: 'multiplePopup'
              },
              {
                title: 'multipleFunction',
                selection: 'multiple',
                type: 'function',
                functionName: 'multipleFunction'
              },
              {
                title: 'rowKeyJobFunction',
                selection: 'multiple',
                type: 'function',
                functionName: 'rowKeyJobFunction',
                rowKey: 'job'
              },
              {
                title: 'onlyOverThirtiesActionSingle',
                selection: 'single',
                type: 'function',
                functionName: 'onlyOverThirtiesAction',
                actionSelectionRules: (row: TableRow) => row.age as number > 30
              },
              {
                title: 'onlyOverThirtiesActionMultiple',
                selection: 'multiple',
                type: 'function',
                functionName: 'onlyOverThirtiesAction',
                actionSelectionRules: (row: TableRow) => row.age as number > 30
              }
    ]
  }
])
const visibleColumns = ref<KettalVisibleColumn[]>([
  { name: 'name', isVisible: true },
  { name: 'age', isVisible: true },
  { name: 'birthday', isVisible: true },
  { name: 'isAlive', isVisible: true },
  { name: 'job', isVisible: true },
  { name: 'height', isVisible: true },
  { name: 'description', isVisible: true },
  { name: 'status', isVisible: true },
  { name: 'clickable', isVisible: true },
  { name: 'unexistingColumn', isVisible: false },
  { name: 'nonTrueFalseBool', isVisible: true },
  { name: 'nonEditableBool', isVisible: true }
])

const columns: KettalQTableColumn[] = [
  { name: 'name', label: 'Name', align: 'left', field: 'name', sortable: true, type: 'string', editable: true, editFunction: 'editName', isFieldEditableByRules: (row: TableRow) => row.age as number > 30, notEditableMessage: 'Que pasa si el mensaje es super largo, como por ejemplo, que no se puede editar si esta retenido. Que pasa si el mensaje es super largo, como por ejemplo, que no se puede editar si esta retenido.Que pasa si el mensaje es super largo, como por ejemplo, que no se puede editar si esta retenido.' },
  { name: 'age', label: 'Age', align: 'right', field: 'age', sortable: true, type: 'number', editable: true, editFunction: 'editAge', rules: [(val: number) => !!val || 'Age is required', (val: number) => val > 0 || 'Age must be greater than 0'], validation: (val: number) => val > 0 && !!val, initValue: 0, isFieldEditableByRules: (row: TableRow) => row.age as number > 30 },
  { name: 'birthday', label: 'Birthday', align: 'center', field: 'birthday', sortable: true, type: 'date', editable: true, editFunction: 'editBirthday', dateFormat: 'DD/MM/YYYY', isFieldEditableByRules: (row: TableRow) => row.age as number > 30 },
  { name: 'isAlive', label: 'Is Alive', align: 'center', field: 'isAlive', sortable: true, type: 'boolean', editable: true, editFunction: 'editIsAlive', initValue: true, isFieldEditableByRules: (row: TableRow) => row.age as number > 30 },
  { name: 'job', label: 'Job', align: 'center', field: 'job', sortable: true, type: 'option', editable: true, editFunction: 'editJob', isFieldEditableByRules: (row: TableRow) => row.age as number > 30 },
  { name: 'height', label: 'Height', align: 'center', field: 'height', sortable: true, type: 'decimal', editable: true, editFunction: 'editHeight', nOfDecimals: 2, isFieldEditableByRules: (row: TableRow) => row.age as number > 30 },
  { name: 'description', label: 'Description', align: 'right', field: 'description', sortable: true, type: 'textarea', editable: true, editFunction: 'editDescription', isFieldEditableByRules: (row: TableRow) => row.age as number > 30 },
  { name: 'superLargecolumnnametoseehowitworkswiththeelements', label: 'Super Large Column Name To See How It Works With The Elements', align: 'center', field: 'superLargecolumnnametoseehowitworkswiththeelements', sortable: true, type: 'string', editable: true, editFunction: 'editSuperLargecolumnnametoseehowitworkswiththeelements', isFieldEditableByRules: (row: TableRow) => row.age as number > 30 },
  { name: 'status', label: 'Status', align: 'center', field: 'status', sortable: true, type: 'select', editable: true, selectOptions: ['Marry', 'Divorced', 'Single', 'Widow'], initValue: 'Single', editFunction: 'editStatus', isFieldEditableByRules: (row: TableRow) => row.age as number > 30 },
  { name: 'clickable', label: 'Clickable', align: 'center', field: 'clickable', sortable: true, type: 'string', editable: false, isFieldEditableByRules: (row: TableRow) => row.age as number > 30 },
  { name: 'nonEditableBool', label: 'nonEditableBool', align: 'center', field: 'nonEditableBool', sortable: true, type: 'boolean', editable: false, initValue: true, isFieldEditableByRules: (row: TableRow) => row.age as number > 30 },
  { name: 'nonTrueFalseBool', label: 'nonTrueFalseBool', align: 'center', field: 'nonTrueFalseBool', sortable: true, type: 'boolean', editable: true, editFunction: 'nonTrueFalseBoolFunction', initValue: 'house', trueValue: 'house', falseValue: 'car', isFieldEditableByRules: (row: TableRow) => row.age as number > 30 }
]
</script>
    <style></style>
