<script setup lang="ts">
import { h, ref, useTemplateRef } from "vue";
import { assertRef, formatNumber } from "@fkui/logic";
import { FButton, FSortFilterDataset, useDatasetRef } from "@fkui/vue";
import {
    type TableColumn,
    FTable,
    defineTableColumns,
    getTableSortableAttributes,
    removeRow,
} from "@fkui/vue-labs";

const tableRef = useTemplateRef("table");

const selectFieldOptions = ["Hund", "Katt", "Hamster", "Papegoja", "Spindel", "Guldfisk"];

interface Row {
    id: string;
    animal?: string;
    level: string;
    start: string;
    end: string;
    antal: string;
    expandableRows?: Row[];
    expandableContent?: Array<{
        id: string;
        content: string;
    }>;
    aktiv?: boolean;
}

const oformateradTextKolumnSynlig = ref(true);

const columns = defineTableColumns<Row>([
    {
        type: "text",
        header: "Oformaterad text",
        value(row) {
            return String(row.antal);
        },
        enabled: oformateradTextKolumnSynlig,
    },
    {
        type: "checkbox",
        header: "Kryssruta",
        key: "aktiv",
        size: "shrink",
        label: (row) => `Välj rad ${row.id}`,
    },
    {
        type: "text",
        header: "Formatterad text",
        label: (row) => `Text för rad ${row.id}`,
        value(row) {
            return formatNumber(row.antal) ?? "";
        },
        editable: true,
    },
    {
        type: "text",
        header: "Redigerbar text",
        editable: true,
        key: "level",
        label: (row) => `Text för rad ${row.id}`,
        value(row) {
            return row.level;
        },
        update(row, newValue) {
            row.level = newValue;
        },
        validation: {
            required: {},
            maxLength: { length: 5 },
        },
    },
    {
        type: "button",
        header: "Knapp",
        icon: "trashcan",
        size: "shrink",
        text(row) {
            return `Ta bort ${row.id}`;
        },
        onClick: (row) => {
            onRemoveRow(row);
        },
    },
    {
        header: "Länk",
        type: "anchor",
        href: "#",
        text() {
            return "Länktext";
        },
    },
    {
        header: "Dropplista",
        type: "select",
        key: "animal",
        label: (row) => `Djur för rad ${row.id}`,
        options: selectFieldOptions,
        editable: true,
    },
    {
        header: "Render function",
        render(row) {
            return h("td", { id: `foo-${row.id}`, class: "bar" }, ["👻"]);
        },
    },
    // {
    //     header: "Custom component",
    //     type: "render",
    //     render() {
    //         return XTableChip;
    //     },
    // },
]);

const rows = useDatasetRef<Row>(
    [
        {
            id: "1",
            animal: "Katt",
            level: "Föräldrapenning",
            start: "2022-04-11",
            end: "2022-04-20",
            antal: "10000",
            aktiv: false,
            expandableRows: [
                {
                    id: "1a",
                    level: "Sjukpenningsnivå",
                    start: "2022-04-18",
                    end: "2022-04-20",
                    antal: "30000",
                },
                {
                    id: "1b",
                    level: "Lägstanivå",
                    start: "2022-04-16",
                    end: "2022-04-17",
                    antal: "20000",
                },
                {
                    id: "1c",
                    level: "Sjukpenningsnivå",
                    start: "2022-04-11",
                    end: "2022-04-15",
                    antal: "50000",
                },
            ],
            expandableContent: [
                {
                    id: "1a",
                    content: "Anledning: Tar hand om barnet",
                },
            ],
        },
        {
            id: "2",
            animal: "Spindel",
            level: "Tillfällig föräldrapenning",
            start: "2022-05-02",
            end: "2022-05-04",
            antal: "30000",
            aktiv: false,
            expandableRows: [
                {
                    id: "2a",
                    level: "Heldag",
                    start: "2022-05-02",
                    end: "2022-05-04",
                    antal: "30000",
                },
            ],
            expandableContent: [
                {
                    id: "2a",
                    content: "Anledning: Tar hand om barnet",
                },
            ],
        },
        {
            id: "3",
            animal: "Hamster",
            level: "Föräldrapenning",
            start: "2022-05-16",
            end: "2022-05-27",
            antal: "11000",
            aktiv: true,
            expandableRows: [
                {
                    id: "3a",
                    level: "Sjukpenningsnivå",
                    start: "2022-05-23",
                    end: "2022-05-27",
                    antal: "40000",
                },
                {
                    id: "3b",
                    level: "Lägstanivå",
                    start: "2022-05-21",
                    end: "2022-05-22",
                    antal: "20000",
                },
                {
                    id: "3c",
                    level: "Sjukpenningsnivå",
                    start: "2022-05-16",
                    end: "2022-05-20",
                    antal: "50000",
                },
            ],
            expandableContent: [
                {
                    id: "3a",
                    content: "Anledning: Tar hand om barnet",
                },
            ],
        },
    ],
    "expandableRows",
);

const sortableAttributes = getTableSortableAttributes(columns);
const mySelectedRows = ref([rows.value[0]]);

function onAddRow(): void {
    rows.value.push({
        id: String(rows.value.length + 1),
        animal: "Katt",
        level: "Föräldrapenning",
        start: "2022-04-11",
        end: "2022-04-20",
        antal: "10000",
        aktiv: false,
    });
}

function onRemoveRow(row: Row): void {
    assertRef(tableRef);

    tableRef.value.withTabstopBehaviour("row-removal", () => {
        rows.value = removeRow(rows.value, row, "expandableRows");
    });
}

function onRemoveSelectedRows(): void {
    rows.value = rows.value.filter((row) => !mySelectedRows.value.includes(row));
}
</script>

<template>
    <f-button variant="secondary" @click="onRemoveSelectedRows"> Ta bort markerade rader </f-button>
    <f-sort-filter-dataset :data="rows" :sortable-attributes>
        <template #default="{ sortFilterResult }">
            <f-table
                ref="table"
                v-model:selected-rows="mySelectedRows"
                :rows="sortFilterResult"
                :columns
                key-attribute="id"
                striped
                selectable="multi"
                expandable-attribute="expandableRows"
            >
                <template #caption>Tabell</template>
                <template #footer>Footer</template>
            </f-table>
        </template>
    </f-sort-filter-dataset>
    <f-button variant="secondary" @click="onAddRow">Lägg till rad</f-button>
    <f-button
        variant="secondary"
        @click="oformateradTextKolumnSynlig = !oformateradTextKolumnSynlig"
    >
        Dölj/visa "Oformatterad text"
    </f-button>
</template>

<style>
body {
    padding: 1rem;
}

.icon-button {
    margin: 0;
    padding: 0;
    background: inherit;
    border: 0;
    cursor: pointer;
}

.level-2 {
    margin-left: 0.5rem;
}

.level-3 {
    padding-left: 1rem;
}

.bar {
    background: hotpink;
}
</style>

<script setup lang="ts">
import { computed, ref } from "vue";
import { ValidationService } from "@fkui/logic";
import { FButton, useDatasetRef } from "@fkui/vue";
import { FTable, defineTableColumns } from "@fkui/vue-labs";

interface TableRow {
    id: string;
    text: string;
    pnr: string;
    bankAccountNumber: string;
    bankgiro: string;
    clearingNumber: string;
    date: string;
    epost: string;
    orgnr: string;
    tele: string;
    postnr: string;
    plusgiro: string;
    currency: number | string;
    percent: number | string;
    number: number | string;
}

const columns1 = defineTableColumns<TableRow, keyof TableRow>([
    {
        type: "text",
        header: "Text",
        key: "text",
        editable: true,
        label() {
            return "Label";
        },
    },
    {
        type: "text:personnummer",
        header: "Pnr",
        key: "pnr",
        editable: true,
        label() {
            return "Label";
        },
    },
    {
        type: "text:bankAccountNumber",
        header: "Kontonr",
        key: "bankAccountNumber",
        editable: true,
        label() {
            return "Label";
        },
    },
    {
        type: "text:bankgiro",
        header: "Bankgiro",
        key: "bankgiro",
        editable: true,
        label() {
            return "Label";
        },
    },
    {
        type: "text:clearingNumber",
        header: "Clearingnr",
        key: "clearingNumber",
        editable: true,
        label() {
            return "Label";
        },
    },
]);

const columns2 = defineTableColumns<TableRow, keyof TableRow>([
    {
        type: "text:currency",
        header: "Valuta",
        key: "currency",
        editable: true,
        label() {
            return "Label";
        },
    },
    {
        type: "text:date",
        header: "Datum",
        key: "date",
        editable: true,
        label() {
            return "Label";
        },
    },
    {
        type: "text:number",
        decimals: 3,
        header: "Nummer, tre decimaler",
        key: "number",
        editable: true,
        label() {
            return "Label";
        },
    },
    {
        type: "text:percent",
        decimals: 2,
        header: "% två decimaler",
        key: "percent",
        editable: true,
        label() {
            return "Label";
        },
    },
    {
        type: "text:email",
        header: "Epost",
        key: "epost",
        editable: true,
        label() {
            return "Label";
        },
    },
]);

const columns3 = defineTableColumns<TableRow, keyof TableRow>([
    {
        type: "text:organisationsnummer",
        header: "Orgnr",
        key: "orgnr",
        editable: true,
        label() {
            return "Label";
        },
    },
    {
        type: "text:phoneNumber",
        header: "Tele",
        key: "tele",
        editable: true,
        label() {
            return "Label";
        },
    },
    {
        type: "text:postalCode",
        header: "Postnr",
        key: "postnr",
        editable: true,
        label() {
            return "Label";
        },
    },
    {
        type: "text:plusgiro",
        header: "Plusgiro",
        key: "plusgiro",
        editable: true,
        label() {
            return "Label";
        },
    },
]);

const rows = useDatasetRef<TableRow>([
    {
        id: "1",
        text: "aaa",
        pnr: "19120211-9150",
        bankAccountNumber: "12345678",
        bankgiro: "9999996",
        clearingNumber: "5678",
        date: "2023-06-15",
        currency: 3453455,
        number: 5.4,
        percent: 9.987,
        epost: "a.b@example.net",
        orgnr: "9999999999",
        tele: "12345678901234567",
        postnr: "37324",
        plusgiro: "11111119",
    },
    {
        id: "2",
        text: "bbb",
        pnr: "201812312385",
        bankAccountNumber: "0012345678",
        bankgiro: "999-9996",
        clearingNumber: "56781",
        currency: 24233,
        date: "2024-01-20",
        number: 5.5,
        percent: 19.987,
        epost: "a.b@example.net",
        orgnr: "9999999999",
        tele: "12345678901234567",
        postnr: "39359",
        plusgiro: "11111119",
    },
    {
        id: "3",
        text: "ccc",
        pnr: "197006121144",
        bankAccountNumber: "123456",
        bankgiro: "999-9996",
        clearingNumber: "5678-1",
        currency: 234623546,
        date: "2022-11-05",
        number: 5.55,
        percent: 3.1,
        epost: "a.b@example.net",
        orgnr: "9999999999",
        tele: "12345678901234567",
        postnr: "37332",
        plusgiro: "111112",
    },
]);

const sum = computed(() => {
    return rows.value.reduce((sum, row) => {
        if (typeof row.number === "number") {
            return sum + row.number;
        } else {
            return sum;
        }
    }, 0);
});

function validataAll(): void {
    ValidationService.validateAllElements("all");
}
</script>

<template>
    <f-button variant="secondary" @click="validataAll"> Interagerbart element före </f-button>
    <div id="all">
        <f-table :rows :columns="columns1" key-attribute="id" striped> </f-table>
        <f-table :rows :columns="columns2" key-attribute="id" striped> </f-table>
        <f-table :rows :columns="columns3" key-attribute="id" striped> </f-table>
    </div>
    <pre>Summa: {{ { sum } }}</pre>
    <h3>Rows ({{ rows.length }} items):</h3>
    <pre>{{ rows }}</pre>
    <f-button variant="secondary" @click="validataAll"> Interagerbart element efter </f-button>
</template>