import React, { FC, ReactNode } from "react";
import { IconBlocks, IconEdit, IconHistory } from "@tabler/icons-react";
import { Box, Tabs, Text } from "@mantine/core";
import DealEditorTabPanel from "@/app/deals/drawers/DealEditorDrawer/components/DealEditorTabPanel";
import TabsList from "@/app/deals/drawers/DealEditorDrawer/components/TabsList";
import CustomTab from "@/app/deals/drawers/DealEditorDrawer/tabs/CustomTab/CustomTab";
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 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.modules) {
            if (!module.isBuiltIn) {
                for (const tab of module.tabs) {
                    tabs.push(getTab(tab.key, tab.label, <IconBlocks />));
                }
                continue;
            }

            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.modules) {
            if (!module.isBuiltIn) {
                const tabPanel = (
                    <DealEditorTabPanel
                        key={module.key}
                        value={module.key}>
                        <CustomTab
                            key={module.key}
                            moduleId={module.id}
                            deal={props.value}
                        />
                    </DealEditorTabPanel>
                );

                tabPanels.push(tabPanel);
                continue;
            }

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

                const tabPanel = (
                    <DealEditorTabPanel
                        key={tab.key}
                        value={tab.key}>
                        {tab.tab(props)}
                    </DealEditorTabPanel>
                );
                tabPanels.push(tabPanel);
            }
        }

        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>

            <DealEditorTabPanel value={"general"}>
                <GeneralTab {...props} />
            </DealEditorTabPanel>
            <DealEditorTabPanel value={"history"}>
                <DealStatusHistoryTab {...props} />
            </DealEditorTabPanel>
            {getModuleTabPanels()}
        </Tabs>
    );
};

export default DealEditorBody;
