<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
          ref="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 > 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);
            }
          "
          @row-click="() => {}"
        >
          <template #beforeTop> Before top </template>

          <template #afterTop> After Top </template>
        </k-table>
      </div>
      <div class="row">
        <q-btn
          test-id="addRow"
          @click="
            () => {
              rows.push({
                name: 'Albert',
                age: 25,
                birthday: '12/03/1998',
                isAlive: true,
                job: 'Data Analyst',
                height: 1.68,
                description: 'New Description',
              });
            }
          "
        />
        <q-btn
          test-id="addProgramadorRow"
          @click="
            () => {
              rows.push({
                name: 'Carlos',
                age: 22,
                birthday: '12/03/1998',
                isAlive: true,
                job: 'Programador',
                height: 1.68,
                description: 'New Description',
              });
            }
          "
        />
        <q-btn
          test-id="listRowKey"
          @click="
            () => {
              rowKey = ['job', 'age'];
            }
          "
        />
        <q-btn
          test-id="singleRowKey"
          @click="
            () => {
              rowKey = 'name';
            }
          "
        />
        <q-btn
          test-id="addNonExistingColumnToVisible"
          @click="
            () => {
              visibleColumns.push({
                name: 'nonExistingColumn',
                isVisible: true,
              });
            }
          "
        />
        <q-btn
          test-id="removeAllVisibleColumns"
          @click="
            () => {
              visibleColumns = [];
            }
          "
        />
        <q-btn
          test-id="toggleLoadingButton"
          @click="
            () => {
              tableLoading = !tableLoading;
            }
          "
        />
        <q-btn
          test-id="deleteAllRows"
          @click="
            () => {
              rows = [];
            }
          "
        />
        <q-btn
          test-id="setStartSortedBy"
          @click="
            () => {
              startSortedBy = [
                { column: 'job', isAscending: false },
                { column: 'age', isAscending: false },
              ];
            }
          "
        />
        <q-btn
          test-id="onlyOverThirtiesAction"
          @click="
            () => {
              tableActions = [
                {
                  title: 'onlyOverThirtiesActionSingle',
                  selection: 'single',
                  type: 'function',
                  functionName: 'onlyOverThirtiesAction',
                  actionSelectionRules: (row: TableRow) =>
                    (row.age as number) > 30,
                },
              ];
            }
          "
        />
        <q-btn
          label="scrollTo"
          @click="
            () => {
              table.scrollTo(15);
            }
          "
        />
      </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,
  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 table = ref();
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: "image", isVisible: true },
  { 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 },
  { name: "lastConnection", isVisible: true },
]);

const columns = ref<KettalQTableColumn[]>([
  {
    name: "image",
    label: "Image",
    align: "left",
    field: "image",
    sortable: true,
    type: "image",
  },
  {
    name: "name",
    label: "Name",
    align: "left",
    field: "name",
    sortable: true,
    type: "string",
    editable: true,
    editFunction: "editName",
  },
  {
    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,
  },
  {
    name: "birthday",
    label: "Birthday",
    align: "left",
    field: "birthday",
    sortable: true,
    type: "date",
    editable: true,
    editFunction: "editBirthday",
    dateFormat: "DD/MM/YYYY",
  },
  {
    name: "isAlive",
    label: "Is Alive",
    align: "left",
    field: "isAlive",
    sortable: true,
    type: "boolean",
    editable: true,
    editFunction: "editIsAlive",
    initValue: true,
  },
  {
    name: "job",
    label: "Job",
    align: "left",
    field: "job",
    sortable: true,
    type: "option",
    editable: true,
    editFunction: "editJob",
  },
  {
    name: "height",
    label: "Height",
    align: "left",
    field: "height",
    sortable: true,
    type: "decimal",
    editable: true,
    editFunction: "editHeight",
    nOfDecimals: 2,
  },
  {
    name: "description",
    label: "Description",
    align: "right",
    field: "description",
    sortable: true,
    type: "textarea",
    editable: true,
    editFunction: "editDescription",
  },
  {
    name: "superLargecolumnnametoseehowitworkswiththeelements",
    label: "Super Large Column Name To See How It Works With The Elements",
    align: "left",
    field: "superLargecolumnnametoseehowitworkswiththeelements",
    sortable: true,
    type: "string",
    editable: true,
    editFunction: "editSuperLargecolumnnametoseehowitworkswiththeelements",
  },
  {
    name: "status",
    label: "Status",
    align: "left",
    field: "status",
    sortable: true,
    type: "select",
    editable: true,
    selectOptions: ["Marry", "Divorced", "Single", "Widow"],
    initValue: "Single",
    editFunction: "editStatus",
  },
  {
    name: "clickable",
    label: "Clickable",
    align: "left",
    field: "clickable",
    sortable: true,
    type: "string",
    editable: false,
  },
  {
    name: "nonEditableBool",
    label: "nonEditableBool",
    align: "left",
    field: "nonEditableBool",
    sortable: true,
    type: "boolean",
    editable: false,
    initValue: true,
  },
  {
    name: "nonTrueFalseBool",
    label: "nonTrueFalseBool",
    align: "left",
    field: "nonTrueFalseBool",
    sortable: true,
    type: "boolean",
    editable: true,
    editFunction: "nonTrueFalseBoolFunction",
    initValue: "house",
    trueValue: "house",
    falseValue: "car",
  },
  {
    name: "lastConnection",
    label: "lastConnection",
    align: "left",
    field: "lastConnection",
    sortable: true,
    type: "dateTime",
    editable: true,
    editFunction: "editLastConnection",
    dateTimeFormat: "DD/MM/YYYY HH:mm:ss",
  },
]);
</script>
<style></style>
