<template>
  <q-page-container class=" full-width column justify-center">
    <q-page
      class="full-width column justify-center align-center items-center"
      style="height: 70vh;"
    >
      <div
        class="full-width"
        style="height: 70vh;"
      >
        <k-table
          v-model:visible-columns="visibleColumns"
          v-model:selected="selected"
          :table-actions="tableActions"
          :columns="columns"
          :rows="rows"
          :row-key="rowKey"
          @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>
      <div class="row">
        <q-btn
          label="Add Row"
          color="black"
          @click="() => {
            rows.push({
              name: 'Albert',
              age: 25,
              birthday: '12/03/1998',
              isAlive: true,
              job: 'Data Analyst',
              height: 1.68,
              description: 'New Description'
            })
          }"
        />
        <q-btn
          label="Add Programador Row"
          color="black"
          @click="() => {
            rows.push({
              name: 'Carlos',
              age: 22,
              birthday: '12/03/1998',
              isAlive: true,
              job: 'Programador',
              height: 1.68,
              description: 'New Description'
            })
          }"
        />
        <q-btn
          label="List RowKey"
          color="black"
          @click="() => {
            console.log(rowKey)
            rowKey = ['job', 'age']
            console.log(rowKey)
          }"
        />
        <q-btn
          label="single RowKey"
          color="black"
          @click="() => {
            console.log(rowKey)
            rowKey = 'name'
            console.log(rowKey)
          }"
        />
      </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 } 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 tableActions: 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'
              }
    ]
  }
]
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: 'superLargecolumnnametoseehowitworkswiththeelements', isVisible: true }

])
const columns: KettalQTableColumn[] = [
  { name: 'name', label: 'Name', align: 'left', field: 'name', sortable: true, type: 'string', editable: true },
  {
    name: 'age',
    label: 'Age',
    align: 'center',
    field: 'age',
    sortable: true,
    type: 'number',
    editable: true,
    rules: [
      (val: number) => !!val || 'Age is required',
      (val: number) => val > 0 || 'Age must be greater than 0'
    ],
    validation: (val: number) => val > 0 && !!val
  },
  { name: 'birthday', label: 'Birthday', align: 'center', field: 'birthday', sortable: true, type: 'date', editable: true },
  { name: 'isAlive', label: 'Is Alive', align: 'center', field: 'isAlive', sortable: true, type: 'boolean', editable: true },
  { name: 'job', label: 'Job', align: 'center', field: 'job', sortable: true, type: 'option', editable: true },
  { name: 'height', label: 'Height', align: 'center', field: 'height', sortable: true, type: 'decimal', editable: true },
  { name: 'description', label: 'Description', align: 'center', field: 'description', sortable: true, type: 'textarea', editable: true },
  { 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 }

]
</script>
  <style></style>
  ../types/KTable.js../types/KTable.js
