import React, { FC, ReactNode } from "react";
import { IconEdit } from "@tabler/icons-react";
import { motion } from "framer-motion";
import { Box, Tabs, Text } from "@mantine/core";
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 getModuleTabs = () =>
        props.project?.builtInModules.map(module => {
            const moduleRender = MODULES[module.key].renderInfo;
            return (
                <Tabs.Tab
                    key={moduleRender.key}
                    value={moduleRender.key}
                    leftSection={moduleRender.icon}>
                    <Box
                        style={{
                            justifyItems: "left",
                        }}>
                        <Text>{moduleRender.label}</Text>
                    </Box>
                </Tabs.Tab>
            );
        });

    const getModuleTabPanels = () =>
        props.project?.builtInModules.map(module =>
            getTabPanel(module.key, MODULES[module.key]?.getTab?.(props))
        );

    return (
        <Tabs
            defaultValue="general"
            orientation={isMobile ? "horizontal" : "vertical"}
            h={"100%"}
            classNames={{ tab: styles.tab }}>
            <Tabs.List>
                <Tabs.Tab
                    value="general"
                    leftSection={<IconEdit />}>
                    Общая информация
                </Tabs.Tab>
                {getModuleTabs()}
            </Tabs.List>

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

export default DealEditorBody;