import React, { FC, ReactNode } from "react";
import { IconEdit, IconHistory } from "@tabler/icons-react";
import { motion } from "framer-motion";
import { Box, Tabs, Text } from "@mantine/core";
import TabsList from "@/app/deals/drawers/DealEditorDrawer/components/TabsList";
import DealStatusHistoryTab from "@/app/deals/drawers/DealEditorDrawer/tabs/DealStatusHistoryTab/DealStatusHistoryTab";
import GeneralTab from "@/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/GeneralTab";
import useIsMobile from "@/hooks/utils/useIsMobile";
import { DealSchema, ProjectSchema } from "@/lib/client";
import MODULES from "@/modules/modules";
import styles from "../DealEditorDrawer.module.css";

type Props = {
    value: DealSchema;
    onChange: (deal: DealSchema) => void;
    onDelete: (deal: DealSchema) => void;
    project: ProjectSchema | null;
};

const DealEditorBody: FC<Props> = props => {
    const isMobile = useIsMobile();

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

    const getTab = (key: string, label: string, icon: ReactNode) => (
        <Tabs.Tab
            key={key}
            value={key}
            leftSection={icon}>
            <Box
                style={{
                    justifyItems: "left",
                }}>
                <Text>{label}</Text>
            </Box>
        </Tabs.Tab>
    );

    const getModuleTabs = (): ReactNode[] => {
        if (!props.project) return [];
        const tabs: ReactNode[] = [];

        for (const module of props.project.builtInModules) {
            const moduleInfo = MODULES[module.key];
            for (const tab of moduleInfo.tabs) {
                if (
                    (tab.device === "desktop" && isMobile) ||
                    (tab.device === "mobile" && !isMobile)
                )
                    continue;

                tabs.push(getTab(tab.key, tab.label, tab.icon));
            }
        }

        return tabs;
    };

    const getModuleTabPanels = () => {
        if (!props.project) return [];
        const tabPanels: ReactNode[] = [];

        for (const module of props.project.builtInModules) {
            const moduleInfo = MODULES[module.key];
            for (const tab of moduleInfo.tabs) {
                if (
                    (tab.device === "desktop" && isMobile) ||
                    (tab.device === "mobile" && !isMobile)
                )
                    continue;

                tabPanels.push(getTabPanel(tab.key, tab.tab(props)));
            }
        }

        return tabPanels;
    };

    return (
        <Tabs
            defaultValue="general"
            orientation={isMobile ? "horizontal" : "vertical"}
            h={isMobile ? "min-content" : "97vh"}
            mih={isMobile ? "min-content" : "97vh"}
            keepMounted={false}
            classNames={{ tab: styles.tab }}>
            <TabsList>
                {getTab("general", "Общая информация", <IconEdit />)}
                {getTab("history", "История", <IconHistory />)}
                {getModuleTabs()}
            </TabsList>

            {getTabPanel("general", <GeneralTab {...props} />)}
            {getTabPanel("history", <DealStatusHistoryTab {...props} />)}
            {getModuleTabPanels()}
        </Tabs>
    );
};

export default DealEditorBody;