import React, { FC } from "react";
import { Box, Group, Text } from "@mantine/core";
import { modals } from "@mantine/modals";
import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
import ProjectMenu from "@/app/deals/drawers/ProjectsMobileEditorDrawer/components/ProjectMenu";
import { ProjectSchema } from "@/lib/client";
import styles from "./../ProjectsEditorDrawer.module.css";

type Props = {
    project: ProjectSchema;
    onSelect: (project: ProjectSchema | null) => void;
    closeDrawer: () => void;
};

const ProjectMobile: FC<Props> = ({ project, onSelect, closeDrawer }) => {
    const { projectsCrud } = useProjectsContext();

    const startEditing = () => {
        modals.openContextModal({
            modal: "enterNameModal",
            title: "Редактирование проекта",
            withCloseButton: true,
            innerProps: {
                onChange: values => projectsCrud.onUpdate(project.id, values),
                value: project,
            },
        });
    };

    const onClick = () => {
        onSelect(project);
        closeDrawer();
    };

    return (
        <Group
            w={"100%"}
            pl={"xs"}
            py={"xs"}
            justify={"space-between"}
            wrap={"nowrap"}
            className={styles.project}
            onClick={onClick}>
            <Box>
                <Text>{project.name}</Text>
            </Box>
            <ProjectMenu
                project={project}
                startEditing={startEditing}
            />
        </Group>
    );
};

export default ProjectMobile;
