import { Chip } from '@mui/joy';
import { EntityType, NamedEntity } from "../../../model/NamedEntity";
import BusinessCenterIcon from '@mui/icons-material/BusinessCenter';
import PersonIcon from '@mui/icons-material/Person';
import LocationOnIcon from '@mui/icons-material/LocationOn';

import { useNavigate } from "react-router-dom";

type ColorType = "primary" | "warning" | "success" | "neutral" | "danger" | undefined;
type SizeType = "sm" | "md" | "lg" | undefined;

function NamedEntityChip({namedEntity, size = "md"} : {namedEntity: NamedEntity, size?: SizeType}) {
    const navigation = useNavigate();
    const entityType = namedEntity.entity_type;
    
    const entityTypeChip = {
        [EntityType.PERSON]: {
            color: "primary" as ColorType,
            icon: <PersonIcon />,
        },
        [EntityType.ORGANIZATION]: {
            color: "warning" as ColorType,
            icon: <BusinessCenterIcon />,
        },
        [EntityType.LOCATION]: {
            color: "success" as ColorType,
            icon: <LocationOnIcon />,
        },
    };

    return (
        <div>
            {entityType && namedEntity.name &&
            <Chip
                color={entityTypeChip[entityType].color}
                disabled={false}
                onClick={() => navigation(`/tags/${namedEntity.name}`)}
                size={size}
                variant="outlined"
                startDecorator={entityTypeChip[entityType].icon}
            >
                {namedEntity.name}
            </Chip>}
        </div>
    );
}

export default NamedEntityChip;