import { Box, Drawer, rem, Tabs } from "@mantine/core";
import { FC, ReactNode, useEffect } from "react";
import { useDealPageContext } from "../../contexts/DealPageContext.tsx";
import { IconBox, IconCalendarUser, IconCubeSend, IconSettings, IconUser, IconUsersGroup } from "@tabler/icons-react";
import DealStatusChangeTable from "../../components/DealStatusChangeTable/DealStatusChangeTable.tsx";
import DealEditDrawerGeneralTab from "./tabs/DealEditDrawerGeneralTab.tsx";
import { useQueryClient } from "@tanstack/react-query";
import ProductAndServiceTab from "../../tabs/ProductAndServiceTab/ProductAndServiceTab.tsx";
import { motion } from "framer-motion";
import ShippingTab from "../../tabs/ShippingTab/ShippingTab.tsx";
import EmployeesTab from "../../tabs/EmployeesTab/EmployeesTab.tsx";
import ClientTab from "./tabs/ClientTab.tsx";

const useDealStatusChangeState = () => {
    const { selectedDeal } = useDealPageContext();
    return {
        statusHistory: selectedDeal?.statusHistory || [],
    };
};

const DealEditDrawerStatusChangeTable = () => {
    const { statusHistory } = useDealStatusChangeState();

    return <DealStatusChangeTable items={statusHistory} />;
};

const useDealEditDrawerState = () => {
    const { selectedDeal, setSelectedDeal } = useDealPageContext();
    return {
        isVisible: selectedDeal !== undefined,
        onClose: () => setSelectedDeal(undefined),
    };
};

const DealEditDrawer: FC = () => {
    const { isVisible, onClose } = useDealEditDrawerState();
    const queryClient = useQueryClient();
    useEffect(() => {
        if (isVisible) return;
        queryClient.invalidateQueries({ queryKey: ["getDealSummaries"] });
    }, [isVisible]);

    const getTabPanel = (value: string, component: ReactNode) => {
        return (
            <Tabs.Panel value={value}>
                <motion.div
                    initial={{ opacity: 0 }}
                    animate={{ opacity: 1 }}
                    transition={{ duration: 0.2 }}>
                    <Box
                        h={"100%"}
                        w={"100%"}
                        p={rem(10)}>
                        {component}
                    </Box>
                </motion.div>
            </Tabs.Panel>
        );
    };

    return (
        <Drawer
            size={"calc(100vw - 150px)"}
            position={"right"}
            onClose={onClose}
            removeScrollProps={{ allowPinchZoom: true }}
            withCloseButton={false}
            opened={isVisible}
            styles={{
                body: {
                    height: "100%",
                    display: "flex",
                    flexDirection: "column",
                    gap: rem(10),
                },
            }}>
            <Tabs
                defaultValue={"general"}
                flex={1}
                variant={"outline"}
                orientation={"vertical"}
                keepMounted={false}>
                <Tabs.List>
                    <Tabs.Tab
                        value={"general"}
                        leftSection={<IconSettings />}>
                        Общее
                    </Tabs.Tab>
                    <Tabs.Tab
                        value={"client"}
                        leftSection={<IconUser />}>
                        Клиент
                    </Tabs.Tab>
                    <Tabs.Tab
                        value={"history"}
                        leftSection={<IconCalendarUser />}>
                        История
                    </Tabs.Tab>
                    <Tabs.Tab
                        value={"servicesAndProducts"}
                        leftSection={<IconBox />}>
                        Товары и услуги
                    </Tabs.Tab>
                    <Tabs.Tab
                        value={"shipment"}
                        leftSection={<IconCubeSend />}>
                        Отгрузка
                    </Tabs.Tab>
                    <Tabs.Tab
                        value={"employees"}
                        leftSection={<IconUsersGroup />}>
                        Исполнители
                    </Tabs.Tab>
                </Tabs.List>
                {getTabPanel("general", <DealEditDrawerGeneralTab />)}
                {getTabPanel("client", <ClientTab />)}
                {getTabPanel("history", <DealEditDrawerStatusChangeTable />)}
                {getTabPanel("servicesAndProducts", <ProductAndServiceTab />)}
                {getTabPanel("shipment", <ShippingTab />)}
                {getTabPanel("employees", <EmployeesTab />)}
            </Tabs>
        </Drawer>
    );
};

export default DealEditDrawer;