"use client";

import React, { FC } from "react";
import { Center, Divider, Drawer, rem, Stack, Text } from "@mantine/core";
import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
import CreateProjectButton from "@/app/deals/drawers/ProjectsEditorDrawer/components/CreateProjectButton";
import ProjectMobile from "@/app/deals/drawers/ProjectsEditorDrawer/components/ProjectMobile";

const ProjectsEditorDrawer: FC = () => {
    const { projects, isEditorDrawerOpened, setIsEditorDrawerOpened } =
        useProjectsContext();
    const onClose = () => setIsEditorDrawerOpened(false);

    return (
        <Drawer
            size={"100%"}
            position={"left"}
            onClose={onClose}
            removeScrollProps={{ allowPinchZoom: true }}
            withCloseButton={false}
            opened={isEditorDrawerOpened}
            trapFocus={false}
            styles={{
                body: {
                    height: "100%",
                    display: "flex",
                    flexDirection: "column",
                    gap: rem(10),
                },
            }}>
            <Center>
                <Text>Проекты</Text>
            </Center>
            <Divider />
            <Stack gap={0}>
                {projects.map((project, index) => (
                    <ProjectMobile
                        key={index}
                        project={project}
                    />
                ))}
            </Stack>
            <CreateProjectButton />
        </Drawer>
    );
};

export default ProjectsEditorDrawer;
