import React, { FC } from "react";
import { IconDotsVertical, IconEdit, IconTrash } from "@tabler/icons-react";
import { Box, Menu } from "@mantine/core";
import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
import DropdownMenuItem from "@/components/ui/DropdownMenuItem/DropdownMenuItem";
import { ProjectSchema } from "@/lib/client";
import styles from "./../ProjectsEditorDrawer.module.css";

type Props = {
    project: ProjectSchema;
    startEditing: () => void;
};

const ProjectMenu: FC<Props> = ({ project, startEditing }) => {
    const { projectsCrud } = useProjectsContext();

    return (
        <Menu>
            <Menu.Target>
                <Box
                    className={styles["menu-button"]}
                    onClick={e => e.stopPropagation()}>
                    <IconDotsVertical />
                </Box>
            </Menu.Target>
            <Menu.Dropdown>
                <DropdownMenuItem
                    onClick={startEditing}
                    icon={<IconEdit />}
                    label={"Переименовать"}
                />
                <DropdownMenuItem
                    onClick={() => projectsCrud.onDelete(project)}
                    icon={<IconTrash />}
                    label={"Удалить"}
                />
            </Menu.Dropdown>
        </Menu>
    );
};

export default ProjectMenu;
