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

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

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

    const openStatusesMobileEditor = () => {
        if (!board) return;
        openDrawer({
            key: "statusesMobileEditorDrawer",
            props: {
                board,
            },
            onClose: refetchStatuses,
        });
    };

    const openStatusColorPicker = () => {
        if (!board) return;
        modals.openContextModal({
            modal: "statusColorPickerModal",
            title: "Изменение цвета статуса",
            withCloseButton: false,
            innerProps: {
                color: status.color,
                onChange: onStatusColorChange,
                switches: statusColors,
            },
        });
    };

    return (
        <Menu>
            <Menu.Target>
                <Box
                    style={{ cursor: "pointer" }}
                    onClick={e => e.stopPropagation()}>
                    <ThemeIcon size={"sm"}>
                        <IconDotsVertical />
                    </ThemeIcon>
                </Box>
            </Menu.Target>
            <Menu.Dropdown>
                <DropdownMenuItem
                    onClick={handleEdit}
                    icon={<IconEdit />}
                    label={"Переименовать"}
                />
                <DropdownMenuItem
                    onClick={openStatusColorPicker}
                    icon={<IconPalette />}
                    label={"Изменить цвет"}
                />
                <DropdownMenuItem
                    onClick={() => onDeleteStatus(status)}
                    icon={<IconTrash />}
                    label={"Удалить"}
                />
                {isMobile && withChangeOrderButton && (
                    <DropdownMenuItem
                        onClick={openStatusesMobileEditor}
                        icon={<IconExchange />}
                        label={"Изменить порядок"}
                    />
                )}
                {isMobile && startDealsSelecting && (
                    <DropdownMenuItem
                        onClick={startDealsSelecting}
                        icon={<IconCheckbox />}
                        label={"Создать группу сделок"}
                    />
                )}
            </Menu.Dropdown>
        </Menu>
    );
};

export default StatusMenu;
