import { Box, Drawer, rem, Tabs } from "@mantine/core";
import { IconHexagons, IconSettings, IconSubtask, IconTags } from "@tabler/icons-react";
import { ReactNode } from "react";
import { motion } from "framer-motion";
import { useProjectsEditorContext } from "../../contexts/ProjectsEditorContext.tsx";
import General from "./tabs/General/General.tsx";
import Attributes from "./tabs/Attributes/Attributes.tsx";
import Modules from "./tabs/Modules/Modules.tsx";
import Tags from "./tabs/Tags/Tags.tsx";


const ProjectEditDrawer = () => {
    const { closeProjectsEditor, openedProjectsEditor } = useProjectsEditorContext();

    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={closeProjectsEditor}
            removeScrollProps={{ allowPinchZoom: true }}
            withCloseButton={false}
            opened={openedProjectsEditor}
            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={"modules"}
                        leftSection={<IconHexagons />}>
                        Модули
                    </Tabs.Tab>
                    <Tabs.Tab
                        value={"attributes"}
                        leftSection={<IconSubtask />}>
                        Атрибуты
                    </Tabs.Tab>
                    <Tabs.Tab
                        value={"tags"}
                        leftSection={<IconTags />}>
                        Теги
                    </Tabs.Tab>
                </Tabs.List>

                {getTabPanel("general", <General />)}
                {getTabPanel("attributes", <Attributes />)}
                {getTabPanel("modules", <Modules />)}
                {getTabPanel("tags", <Tags />)}
            </Tabs>
        </Drawer>
    );
};

export default ProjectEditDrawer;