import { Box, Drawer, rem, Tabs } from "@mantine/core";
import { FC, ReactNode, useEffect } from "react";
import { useCardPageContext } from "../../contexts/CardPageContext.tsx";
import { IconCalendarUser, IconSettings } from "@tabler/icons-react";
import CardStatusChangeTable from "./tabs/CardStatusChangeTable/CardStatusChangeTable.tsx";
import GeneralTab from "./tabs/GeneralTab/GeneralTab.tsx";
import { useQueryClient } from "@tanstack/react-query";
import { motion } from "framer-motion";
import { useModulesContext } from "../../../../modules/context/ModulesContext.tsx";

const useCardStatusChangeState = () => {
    const { selectedCard } = useCardPageContext();
    return {
        statusHistory: selectedCard?.statusHistory || [],
    };
};

const CardEditDrawerStatusChangeTable = () => {
    const { statusHistory } = useCardStatusChangeState();

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

const useCardEditDrawerState = () => {
    const { selectedCard, setSelectedCard } = useCardPageContext();
    return {
        isVisible: selectedCard !== undefined,
        onClose: () => setSelectedCard(undefined),
    };
};

const CardEditDrawer: FC = () => {
    const { isVisible, onClose } = useCardEditDrawerState();
    const queryClient = useQueryClient();

    const { modules } = useModulesContext();

    useEffect(() => {
        if (isVisible) return;
        queryClient.invalidateQueries({ queryKey: ["getCardSummaries"] });
    }, [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>
        );
    };

    const getTabs = () => {
        const moduleTabs = modules.map(module => (
            <Tabs.Tab
                value={module.info.key}
                leftSection={module.info.icon}
            >
                {module.info.label}
            </Tabs.Tab>
        ));

        return (
            <>{moduleTabs}</>
        );
    };

    const getTabPanels = () => {
        const moduleTabPanels = modules.map(
            module => getTabPanel(module.info.key, module.tab),
        );
        return (
            <>{moduleTabPanels}</>
        );
    };

    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={"history"}
                        leftSection={<IconCalendarUser />}>
                        История
                    </Tabs.Tab>
                    {getTabs()}
                </Tabs.List>

                {getTabPanel("general", <GeneralTab />)}
                {getTabPanel("history", <CardEditDrawerStatusChangeTable />)}
                {getTabPanels()}
            </Tabs>
        </Drawer>
    );
};

export default CardEditDrawer;
