import React, { FC } from "react";
import "./styles.scss";
import { v4 as uuidv4 } from 'uuid';
import { IconButtonProps } from "./types";
import { Icons } from "../Icons";
import { useTheme } from "../../provider";
import { useLocale } from "../../hooks/useLocale";
import { IconButton as MuiIconButton } from "@mui/material";
import { Tooltip } from "..";

const toolTipKey = uuidv4()

export const IconButton: FC<IconButtonProps> = ({
    size = "medium",
    variant,
    isDisabled = false,
    tooltip = "",
    placement = "bottom",
    icon = "",
    className = "",
    style = {},
    onClick,
}) => {
    const [theme] = useTheme()
    const newTooltip = useLocale(tooltip)
    let iconSize: any = "medium";
    let iconButtonSize: any = "medium";

    //If is extra small we need to do the combination between inherit and small
    if (size === "xsmall") {
        iconSize = "inherit";
        iconButtonSize = "small";
    } else if (size === "large") {
        iconSize = "inherit";
        iconButtonSize = "large";
    } else if (size === "xlarge") {
        iconSize = "large";
        iconButtonSize = "large";
    } else {
        iconSize = size;
        iconButtonSize = size;
    }

    let iconColor: string = "";
    if (style?.color) {
        iconColor = style?.color;
    }

    const getIconButton = () => {
        return (
            <MuiIconButton
                type="button"
                style={style}
                className={[
                    "icon-button-gtc-rc",
                    `${className}`
                ].join(" ")}
                size={iconButtonSize}
                disabled={isDisabled}
                onClick={onClick}
            >
                <Icons
                    name={icon}
                    size={iconSize}
                    color={iconColor}
                    className={[
                        `${isDisabled ? "icon-button-gtc-rc-disabled" : ""}`,
                        `${variant ? `icon-button-gtc-rc-${variant}-${theme}` : ""}`,
                        `${className}`
                    ].join(" ")}
                />
            </MuiIconButton>
        )
    }

    return (
        <>
            {
                tooltip ?
                    <Tooltip key={toolTipKey} title={newTooltip} placement={placement}>
                     {getIconButton()}
                    </Tooltip> :
                    <>{getIconButton()}</>
            }
        </>
    );
};
