import React, { FC } from "react";
import {
    IconDotsVertical,
    IconEdit,
    IconExchange,
    IconTrash,
} from "@tabler/icons-react";
import { Box, Group, Menu, Text } from "@mantine/core";
import { useDrawersContext } from "@/drawers/DrawersContext";
import useIsMobile from "@/hooks/utils/useIsMobile";
import { BoardSchema, StatusSchema } from "@/lib/client";
import ThemeIcon from "@/components/ui/ThemeIcon/ThemeIcon";

type Props = {
    status: StatusSchema;
    handleEdit: () => void;
    board: BoardSchema | null;
    onDeleteStatus: (status: StatusSchema) => void;
    refetchStatuses?: () => void;
    withChangeOrderButton?: boolean;
};

const StatusMenu: FC<Props> = ({
    status,
    handleEdit,
    board,
    onDeleteStatus,
    refetchStatuses,
    withChangeOrderButton = true,
}) => {
    const isMobile = useIsMobile();
    const { openDrawer } = useDrawersContext();

    return (
        <Menu>
            <Menu.Target>
                <Box
                    style={{ cursor: "pointer" }}
                    onClick={e => e.stopPropagation()}>
                    <ThemeIcon size={"sm"}>
                        <IconDotsVertical />
                    </ThemeIcon>
                </Box>
            </Menu.Target>
            <Menu.Dropdown>
                <Menu.Item
                    onClick={e => {
                        e.stopPropagation();
                        handleEdit();
                    }}>
                    <Group wrap={"nowrap"}>
                        <IconEdit />
                        <Text>Переименовать</Text>
                    </Group>
                </Menu.Item>
                <Menu.Item
                    onClick={e => {
                        e.stopPropagation();
                        onDeleteStatus(status);
                    }}>
                    <Group wrap={"nowrap"}>
                        <IconTrash />
                        <Text>Удалить</Text>
                    </Group>
                </Menu.Item>
                {isMobile && withChangeOrderButton && (
                    <Menu.Item
                        onClick={e => {
                            e.stopPropagation();
                            if (!board) return;
                            openDrawer({
                                key: "statusesMobileEditorDrawer",
                                props: {
                                    board,
                                },
                                onClose: refetchStatuses,
                            });
                        }}>
                        <Group wrap={"nowrap"}>
                            <IconExchange />
                            <Text>Изменить порядок</Text>
                        </Group>
                    </Menu.Item>
                )}
            </Menu.Dropdown>
        </Menu>
    );
};

export default StatusMenu;
