import React, { FC } from "react";
import { IconCheckbox, IconDotsVertical, IconTrash } from "@tabler/icons-react";
import { Box, Menu } from "@mantine/core";
import DropdownMenuItem from "@/components/ui/DropdownMenuItem/DropdownMenuItem";
import ThemeIcon from "@/components/ui/ThemeIcon/ThemeIcon";
import GroupWithDealsSchema from "@/types/GroupWithDealsSchema";


type Props = {
    group: GroupWithDealsSchema;
    onDelete: (groupId: number) => void;
    onStartDealsSelecting: (group: GroupWithDealsSchema) => void;
};

const GroupMenu: FC<Props> = ({ group, onDelete, onStartDealsSelecting }) => {
    return (
        <Menu>
            <Menu.Target>
                <Box onClick={e => e.stopPropagation()}>
                    <ThemeIcon size={"sm"}>
                        <IconDotsVertical />
                    </ThemeIcon>
                </Box>
            </Menu.Target>
            <Menu.Dropdown>
                <DropdownMenuItem
                    onClick={() => onDelete(group.id)}
                    icon={<IconTrash />}
                    label={"Удалить"}
                />
                <DropdownMenuItem
                    onClick={() => onStartDealsSelecting(group)}
                    icon={<IconCheckbox />}
                    label={"Добавить/удалить сделки"}
                />
            </Menu.Dropdown>
        </Menu>
    );
};

export default GroupMenu;