import React, { CSSProperties, FC, ReactNode } from "react";
import { IconDotsVertical, IconEdit, IconTrash } from "@tabler/icons-react";
import { Box, Flex, Menu } from "@mantine/core";
import ActionIconWithTip from "@/components/ui/ActionIconWithTip/ActionIconWithTip";
import DropdownMenuItem from "@/components/ui/DropdownMenuItem/DropdownMenuItem";
import ThemeIcon from "@/components/ui/ThemeIcon/ThemeIcon";
import useIsMobile from "@/hooks/utils/useIsMobile";

export type ActionData = {
    icon: ReactNode;
    onClick: () => void;
    label: string;
    hidden?: boolean;
};

type Props = {
    onChange: () => void;
    onDelete: () => void;
    otherActions?: ActionData[];
    dotsForMobile?: boolean;
    style?: CSSProperties;
    disabled?: boolean;
};

const UpdateDeleteTableActions: FC<Props> = ({
    onChange,
    onDelete,
    otherActions,
    style,
    dotsForMobile = false,
    disabled = false,
}) => {
    const isMobile = useIsMobile();

    if (dotsForMobile && isMobile) {
        return (
            <Menu>
                <Menu.Target>
                    <Box onClick={e => e.stopPropagation()}>
                        <ThemeIcon size={"sm"}>
                            <IconDotsVertical />
                        </ThemeIcon>
                    </Box>
                </Menu.Target>
                <Menu.Dropdown>
                    <DropdownMenuItem
                        onClick={onChange}
                        icon={<IconEdit />}
                        label={"Редактировать"}
                        disabled={disabled}
                    />
                    {otherActions?.map(
                        action =>
                            !action.hidden && (
                                <DropdownMenuItem
                                    onClick={action.onClick}
                                    icon={action.icon}
                                    label={action.label}
                                    key={action.label}
                                    disabled={disabled}
                                />
                            )
                    )}
                    <DropdownMenuItem
                        onClick={onDelete}
                        icon={<IconTrash />}
                        label={"Удалить"}
                        disabled={disabled}
                    />
                </Menu.Dropdown>
            </Menu>
        );
    }

    return (
        <Flex
            gap={isMobile ? "xs" : "md"}
            style={style}>
            <ActionIconWithTip
                onClick={e => {
                    e.stopPropagation();
                    onChange();
                }}
                disabled={disabled}
                tipLabel={"Редактировать"}>
                <IconEdit />
            </ActionIconWithTip>
            {otherActions?.map(
                action =>
                    !action.hidden && (
                        <ActionIconWithTip
                            onClick={e => {
                                e.stopPropagation();
                                action.onClick();
                            }}
                            disabled={disabled}
                            key={action.label}
                            tipLabel={action.label}>
                            {action.icon}
                        </ActionIconWithTip>
                    )
            )}
            <ActionIconWithTip
                color={"red"}
                onClick={e => {
                    e.stopPropagation();
                    onDelete();
                }}
                disabled={disabled}
                tipLabel={"Удалить"}>
                <IconTrash />
            </ActionIconWithTip>
        </Flex>
    );
};

export default UpdateDeleteTableActions;
