import React, { useState, useEffect } from "react";
import { Autocomplete, AutocompleteGetTagProps, Chip, TextField, Typography } from "@mui/material";
import { createTag } from "../../../actions/cicap-diary-widgets";
import { useAuthContext } from "../../AuthProvider/AuthProvider";
import { createTradeTag, deleteTradeTag } from "../../../actions/cicap-diary-trades-tags";
import { TradesColumnTagPropsType } from "./TradesColumnTag.props";
import CheckIcon from '@mui/icons-material/Check';
import CloseIcon from '@mui/icons-material/Close';
import { styled } from '@mui/material/styles';
export interface Tag {
  id: string;
  name: string;
}
export interface TradesColumnTagPropsType {
    tradeTags: Tag[]
    tags: Tag[]
    tradeId: string
    fetchTags: () => void
}

const TradesColumnTag = ({ tradeTags, tags, tradeId, fetchTags }: TradesColumnTagPropsType) => {
    const [selectTags, setSelectTags] = useState<string[]>(tradeTags.map(t => t.name));
    const { diaryToken } = useAuthContext();
    const [newTag, setNewTag] = useState<string>("");

    useEffect(() => {
        setSelectTags(tradeTags.map(t => t.name))
    }, [tradeTags])

    const createNewTag = (newTag: string) => {
        if (!diaryToken || newTag === "") return

        createTag({ name: newTag }, diaryToken)
            .then(data => {
                if (!data) return;

                fetchTags();
            });
    }

    const createNewTradeTag = (tagId: string) => {
        if (!diaryToken) return

        createTradeTag(tradeId, tagId, diaryToken)
            .then(data => {
                if (!data) return;
                const tags = data.data

                setSelectTags(tags.map(tag => tag.name))
            });
    }

    if (newTag !== "") {
        const newTagId = tags.find(t => t.name === newTag)
        if (newTagId) {
            createNewTradeTag(newTagId.id)
            setNewTag("")
        } 
    }

    const deleteTag = (tagId: string) => {
        if (!diaryToken) return
        deleteTradeTag(tradeId, tagId, diaryToken)
            .then(data => {
                if (!data) return;
                const tags = data.data

                if (tags.length > 0) {
                    setSelectTags(tags.map(tag => tag.name))
                } else {
                    setSelectTags([])
                }
            });
    }

    const handleTagsChange = (event: React.ChangeEvent<{}>, value: string[]) => {
        setSelectTags(value)
        const toBeRemoved = selectTags.filter(tag => !value.includes(tag));

        if (toBeRemoved.length > 0) {
            const filteredTagsToBeRemoved = tags.filter(tag => toBeRemoved.includes(tag.name));
            if (filteredTagsToBeRemoved.length === 0) return
            if (filteredTagsToBeRemoved.length > 1) {
                let i = 0;
                const interval = setInterval(() => {
                    deleteTag(filteredTagsToBeRemoved[i].id);
                    i++;
                    if (i >= filteredTagsToBeRemoved.length) {
                        clearInterval(interval);
                    }
                }, 100);
            } else if (filteredTagsToBeRemoved.length === 1) {
                deleteTag(filteredTagsToBeRemoved[0].id);
            }
        }
        if (value.length === 0) return
        if (value.length < selectTags.length) return

        const filteredData = tags.filter(tag => tag.name === value[value.length - 1]);
        if (filteredData.length > 0) {
            createNewTradeTag(filteredData[0].id)
        }
        const newArr = []
        for (let i = 0; i < value.length; i++) {
            let isPresent = false;
            for (let j = 0; j < tags.length; j++) {
                if (value[i] === tags[j].name) {
                    isPresent = true;
                    break;
                }
            }
            if (!isPresent) {
                newArr.push(value[i]);
            }
        }

        if (newArr.length > 0) {
            createNewTag(newArr[0])
            setNewTag(newArr[0])
        }
    };
    const randomColor = () => {
        const colors = ["#FFE9B8", "#D0E9D7", "#D6E6FF"];
        return colors[Math.floor(Math.random() * colors.length)];
    };

    interface TagProps extends ReturnType<AutocompleteGetTagProps> {
        label: string;
    }
    const Tag = (props: TagProps) => {
        const { label, onDelete, ...other } = props;
        return (
            <div {...other}>
                <span>{label}</span>
                <CloseIcon onClick={onDelete} />
            </div>
        );
    }

    const StyledTag = styled(Tag)<TagProps>(
        ({ theme }) => `
        display: flex;
        align-items: center;
        margin: 2px;
        line-height: 1.5;
        background-color: ${randomColor()};
        border: none;
        border-radius: 2px;
        box-sizing: content-box;
        padding: 0 10px 0 10px;

        & span {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      
        & svg {
          display: none;
        }

        &:hover {
            padding: 0 2px 0 10px;
            & svg {
                display: block;
                font-size: 18px;
                cursor: pointer;
                margin-top: -1px;
                }
            }
      `,
    );

    const truncate = (str: any, n: number) => {
        if (str) return str.length > n ? str.substr(0, n) + '...' : str
    }
    
    return (
        <Autocomplete
            multiple
            options={tags.map(t => t.name)}
            freeSolo
            value={selectTags}
            onChange={handleTagsChange}
            sx={{ minWidth: "180px", fontSize: "8px" }}
            renderTags={(value: string[], getTagProps) => {
                return value.map((option: any, index: number) => (
                    <span key={index}>
                        <StyledTag label={truncate(option, 15)} {...getTagProps({ index })} />
                    </span>
                ))
            }}
            renderInput={(params) => (
                <TextField {...params}
                    sx={{"& input": { fontSize: "12px"}, "& :before": { borderBottom: "3px solid #CFCFCF" }}}
                    placeholder={selectTags.length === 0 ? "пробой уровня" : ""}
                    variant="standard"
                />
            )}
            renderOption={(props, option) => (
                <li style={{ padding: 4, }} {...props}>
                    <span style={{ backgroundColor: randomColor(), borderRadius: 3, marginLeft: 4, padding: "0px 10px 0px 10px" }} >
                        {option}
                    </span>
                </li>
            )}
        />
    )
}

export default TradesColumnTag

Переписать компонент так, чтобы 
    const [selectTags, setSelectTags] = useState() был массивом таких объектов interface Tag {
    name: string;
    color: string;
  }
при отрисовке компонента , в      useEffect(() => {
        setSelectTags(tradeTags.map(t => t.name))
    }, [tradeTags]) сеталось не только имя, но и добавлялся новый цвет, в handleTagsChange приходит массив строк, чтобы имена которые уже есть в массиве с цветом, оставались, а новое value, когда сетается в стейт, добавлялся к нему цвет новый