import { defineStore } from "pinia";
import { ref, reactive } from "vue";
import type { changeShow, dataRowChangeRound, dataRowChangeRoundHistory, historyShow } from "@/modules/09_leave/interface/response/changeRound";
import type { QTableProps } from "quasar";
import { useCounterMixin } from "@/stores/mixin";

const mixin = useCounterMixin()
const { date2Thai } = mixin
const checkCilck = ref<boolean>(false)
// store ลา >> รอบการปฏิบัติงาน
export const useChangeRoundDataStore = defineStore(
    "changeRoundDataStore",
    () => {
        //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
        const visibleColumns = ref<string[]>([
            "cardId",
            "fullName",
            "currentRound",
            "effectiveDate"
        ]);
        const visibleColumnsHistory = ref<string[]>([
            "round",
            "time",
            "effectiveDate",
            "reson"
        ]);

        // หัวตาราง
        const columns = ref<QTableProps["columns"]>([
            {
                name: "cardId",
                align: "left",
                label: "เลขบัตรประชาชน",
                sortable: true,
                field: "cardId",
                headerStyle: "font-size: 14px",
                style: "font-size: 14px",
            },
            {
                name: "fullName",
                align: "left",
                label: "ชื่อ-นามสกุล",
                sortable: true,
                field: "fullName",
                headerStyle: "font-size: 14px",
                style: "font-size: 14px",
            },
            {
                name: "currentRound",
                align: "left",
                label: "รอบปัจจุบัน",
                sortable: true,
                field: "currentRound",
                headerStyle: "font-size: 14px",
                style: "font-size: 14px",
            },
            {
                name: "effectiveDate",
                align: "left",
                label: "วันที่มีผล",
                sortable: true,
                field: "effectiveDate",
                headerStyle: "font-size: 14px",
                style: "font-size: 14px",
            },
        ]);
        const columnsHistory = ref<QTableProps["columns"]>([
            {
                name: "round",
                align: "left",
                label: "ครั้งที่",
                sortable: true,
                field: "round",
                headerStyle: "font-size: 14px",
                style: "font-size: 14px",
            },
            {
                name: "time",
                align: "left",
                label: "รอบเวลา",
                sortable: true,
                field: "time",
                headerStyle: "font-size: 14px",
                style: "font-size: 14px",
            },
            {
                name: "effectiveDate",
                align: "left",
                label: "วันที่มีผล",
                sortable: true,
                field: "effectiveDate",
                headerStyle: "font-size: 14px",
                style: "font-size: 14px",
            },
            {
                name: "reson",
                align: "left",
                label: "เหตุผล",
                sortable: true,
                field: "reson",
                headerStyle: "font-size: 14px",
                style: "font-size: 14px",
            },
        ]);
        const dataList = [
            {
                cardId: '3514210651232',
                prefix: "นางสาว",
                firstName: "กัณฐิมา",
                lastName: "กาฬสินธุ์",
                roundStart: "07:00",
                roundEnd: "11:00",
                effectiveDate: new Date("2023-11-01T03:08:43.217"),
            },
            {
                cardId: '3514210651232',
                prefix: "นางสาว",
                firstName: "กัณฐิมา",
                lastName: "กาฬสินธุ์",
                roundStart: "13:00",
                roundEnd: "16:00",
                effectiveDate: new Date("2023-11-01T03:08:43.217"),
            },
            {
                cardId: '1231231231234',
                prefix: "นายสาว",
                firstName: "test",
                lastName: "test",
                roundStart: "07:00",
                roundEnd: "16:00",
                effectiveDate: new Date("2023-11-01T03:08:43.217"),
            },
        ]

        // ข้อมูลในตาราง
        const rows = ref<changeShow[]>([]);
        const rowsHistory = ref<historyShow[]>([]);
        function fetchDatainHistory(data: dataRowChangeRoundHistory[]) {
            let datalistHistory: historyShow[] = data.map((e: dataRowChangeRoundHistory) => {
                return {
                    id: e.id,
                    time: `${e.roundStart}-${e.roundEnd}`,
                    effectiveDate: date2Thai(e.effectiveDate),
                    reson: e.reson ?? '-'

                };
            });
            rowsHistory.value = datalistHistory;
        }

        function fetchDataForCardId(cardId: string, check: string) {
            if (cardId.length === 13) {
                const data = dataList.filter((e) => e.cardId === cardId);
                rows.value = data.map((e) => ({
                    cardId: e.cardId,
                    prefix: e.prefix,
                    firstName: e.firstName,
                    lastName: e.lastName,
                    fullName: `${e.prefix}${e.firstName} ${e.lastName}`,
                    roundStart: e.roundStart,
                    roundEnd: e.roundEnd,
                    currentRound: `${e.roundStart}-${e.roundEnd}`,
                    effectiveDate: date2Thai(e.effectiveDate),
                }));
            } else if (cardId === 'null') {
                rows.value = []
                checkCilck.value = false
            } else if (check === 'click') {
                checkCilck.value = true
            }
        }


        return {
            visibleColumns,
            columns,
            columnsHistory,
            rows,
            rowsHistory,
            fetchDatainHistory,
            visibleColumnsHistory,
            dataList,
            fetchDataForCardId,
            checkCilck
        };
    }
);