"use client";

import React, { FC, useState } from "react";
import { Drawer } from "@mantine/core";
import ProjectEditorBody from "@/app/deals/drawers/ProjectEditorDrawer/components/ProjectEditorBody";
import { DrawerProps } from "@/drawers/types";
import useIsMobile from "@/hooks/utils/useIsMobile";
import { ProjectSchema } from "@/lib/client";

type Props = {
    value: ProjectSchema;
    onChange: (value: ProjectSchema) => void;
    onDelete: (value: ProjectSchema, onSuccess: () => void) => void;
};

const ProjectEditorDrawer: FC<DrawerProps<Props>> = ({
    opened,
    onClose,
    props,
}) => {
    const isMobile = useIsMobile();
    const [project, setProject] = useState(props.value);

    return (
        <Drawer
            size={isMobile ? "100%" : "40%"}
            position={"right"}
            onClose={onClose}
            removeScrollProps={{ allowPinchZoom: true }}
            withCloseButton={false}
            opened={opened}
            trapFocus={false}
            styles={{
                body: {
                    height: "100%",
                    display: "flex",
                    flexDirection: "column",
                    padding: 0,
                },
            }}>
            <ProjectEditorBody
                value={project}
                onChange={project => {
                    setProject(project);
                    props.onChange(project);
                }}
                onDelete={value => props.onDelete(value, onClose)}
            />
        </Drawer>
    );
};

export default ProjectEditorDrawer;
