import {Tabs} from "@mantine/core";
import {IconBusinessplan, IconHistory} from "@tabler/icons-react";
import {motion} from "framer-motion";
import PayRateTable from "../../components/PayRateTable/PayRateTable.tsx";
import usePayRatesList from "../../hooks/usePayRatesList.tsx";
import {CRUDTableProps} from "../../../../types/CRUDTable.tsx";
import {PayRateSchema, PayRateSchemaBase, PayrollService} from "../../../../client";
import {notifications} from "../../../../shared/lib/notifications.ts";
import PaymentRecordsTable from "../../components/PaymentRecordsTable/PaymentRecordsTable.tsx";

const payRateTableState = (): CRUDTableProps<PayRateSchema> => {
    const {objects: items, refetch} = usePayRatesList();
    const onCreate = (item: PayRateSchemaBase) => {
        PayrollService.createPayRate({
            requestBody: {
                data: item
            }
        }).then(async ({ok, message}) => {
            notifications.guess(ok, {message});
            if (!ok) return;
            await refetch();
        });
    }
    const onChange = (item: PayRateSchema) => {
        PayrollService.updatePayRate({
            requestBody: {
                data: item
            }
        }).then(async ({ok, message}) => {
            notifications.guess(ok, {message});
            if (!ok) return;
            await refetch();
        });
    }
    const onDelete = (item: PayRateSchema) => {
        PayrollService.deletePayRate({
            requestBody: {
                payRateId: item.id
            }
        }).then(async ({ok, message}) => {
            notifications.guess(ok, {message});
            if (!ok) return;
            await refetch();
        });
    }
    return {items, onCreate, onChange, onDelete};
}

const FinancesTab = () => {
    const payRateState = payRateTableState();
    return (
        <>
            <Tabs
                keepMounted={false}
                defaultValue={"paymentRecords"}
                color={"gray.6"}
            >
                <Tabs.List
                    justify={"center"}
                    grow
                >
                    <Tabs.Tab value={"paymentRecords"} leftSection={<IconHistory/>}>
                        Начисления
                    </Tabs.Tab>
                    <Tabs.Tab value={"tariffs"} leftSection={<IconBusinessplan/>}>
                        Тарифы
                    </Tabs.Tab>
                </Tabs.List>
                <Tabs.Panel value={"tariffs"}>
                    <motion.div
                        initial={{opacity: 0}}
                        animate={{opacity: 1}}
                        transition={{duration: 0.2}}

                    >
                        <PayRateTable
                            {...payRateState}
                        />
                    </motion.div>
                </Tabs.Panel>
                <Tabs.Panel value={"paymentRecords"}>
                    <motion.div
                        initial={{opacity: 0}}
                        animate={{opacity: 1}}
                        transition={{duration: 0.2}}
                    >
                        <PaymentRecordsTable/>
                    </motion.div>
                </Tabs.Panel>


            </Tabs>
        </>
    )
}

export default FinancesTab