import React, { FC } from 'react';
import { v4 as uuidv4 } from 'uuid';
import { Chip } from '@mui/material';
import { IconButton } from '../IconButton';
import { PillProps } from './Pill.types';
import cx from 'classnames';

import "./Pill.scss"

const iconButtonKey = uuidv4()

export const Pill: FC<PillProps> = ({
    item = { id: "1", label: "itemTest", color: "#fee" },
    variant = "filled",
    style = {},
    onClick,
    disabled = false,
    size = "dynamic",
    clickable = true,
    icon,
    onClickIcon
}) => {

    const getPillColor = (item: any, variant: PillProps["variant"]) => {
        let color: string = item?.color;
        if (color === "default-green") {
            color = "#005BF8";
        } else if (color === "default-blue") {
            color = "#03A9F4";
        } else if (color === "default") {
            color = "#F1F1F1";
        }
    
        let textColor, backgroundColor, borderColor = "";
        if (variant === "filled") {
            textColor = color === "#F1F1F1" ? "black" : "white";
            backgroundColor = color;
            borderColor = color;
        } else {
            textColor = color;
            backgroundColor = "white";
            borderColor = color;
        }
    
    
        return { textColor, backgroundColor, borderColor }
    }

    const { textColor, backgroundColor, borderColor } = getPillColor(item, variant);

    const pillStyles = {
        color: textColor,
        backgroundColor: backgroundColor,
        border: `1px solid ${borderColor}`,
        width: size === "full" ? "100%" : "unset",
    }

	return (
        <div className={cx("pill-gtc-rc-wrap-div", size === "full" && "gtc-rc-pill-fullsize")}>
            <Chip
                label={item.label}
                variant={variant}
                clickable={clickable}
                onClick={() => onClick && onClick(item)}
                disabled={disabled}
                style={{...style, ...pillStyles}}   //...style from props and ...stylesColor for pills colors
                onDelete={onClickIcon && icon ? () => { onClickIcon(item) } : undefined}
                deleteIcon={
                    (onClickIcon && icon) ? 
                        <IconButton 
                            key={`pillIcon-${iconButtonKey}`} 
                            onClick={() => {
                                onClickIcon(item);
                            }} 
                            size="xsmall" 
                            icon={icon}
                            style={{ color: textColor }}
                        /> :
                        undefined
                }
            />
        </div>
	);
};