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

type Props = {
    onChange: () => void;
    onDelete: () => void;
    dotsForMobile?: boolean;
    style?: CSSProperties;
};

const UpdateDeleteTableActions: FC<Props> = ({
    onChange,
    onDelete,
    style,
    dotsForMobile = 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>
                    <Menu.Item
                        onClick={e => {
                            e.stopPropagation();
                            onChange();
                        }}>
                        <Group wrap={"nowrap"}>
                            <IconEdit />
                            <Text>Редактировать</Text>
                        </Group>
                    </Menu.Item>
                    <Menu.Item
                        onClick={e => {
                            e.stopPropagation();
                            onDelete();
                        }}>
                        <Group wrap={"nowrap"}>
                            <IconTrash />
                            <Text>Удалить</Text>
                        </Group>
                    </Menu.Item>
                </Menu.Dropdown>
            </Menu>
        );
    }

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

export default UpdateDeleteTableActions;
