import SentimentSatisfiedAltIcon from '@mui/icons-material/SentimentSatisfiedAlt';
import SentimentNeutralIcon from '@mui/icons-material/SentimentNeutral';
import SentimentVeryDissatisfiedIcon from '@mui/icons-material/SentimentVeryDissatisfied';
import { SentimentResult } from "../../../model/SentimentResult";

import { Chip } from '@mui/joy';
import { calcPercentage } from "../../../utils/uiUtils";

type ColorType = "primary" | "warning" | "success" | "neutral" | "danger" | undefined;
type SentimentTypeChipArray = Array<{ text: string, color: ColorType, icon: JSX.Element }>;

function SentimentChip({ sentimentResult }: { sentimentResult: SentimentResult }) {

    const sentimentTypeChip: SentimentTypeChipArray = [
        {
            text: "Positive",
            color: "success" as ColorType,
            icon: <SentimentSatisfiedAltIcon />,
        },
        {
            text: "Neutral",
            color: "primary" as ColorType,
            icon: <SentimentNeutralIcon />,
        },
        {
            text: "Negative",
            color: "danger" as ColorType,
            icon: <SentimentVeryDissatisfiedIcon />,
        },
    ]

    const sentiments = [sentimentResult.description_positive, 
        sentimentResult.description_neutral, 
        sentimentResult.description_negative];

    const maxSentiment = Math.max(...sentiments);
    const maxSentimentIndex = sentiments.indexOf(maxSentiment);

    return (
        <Chip
            color={sentimentTypeChip[maxSentimentIndex].color}
            size="md"
            startDecorator={sentimentTypeChip[maxSentimentIndex].icon}
            variant="outlined"
        >
            {sentimentTypeChip[maxSentimentIndex].text} ({calcPercentage(maxSentiment)}%)
        </Chip>
    );
}

export default SentimentChip;