import { AspectRatio, Card, CardContent, Typography, Link, Chip } from "@mui/joy";
import { TagCardProps } from "../../props/TagCardProps";
import { EntityType } 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";
import { Link as RouterLink } from 'react-router-dom';


import dayjs from 'dayjs';
import { useAppSelector } from "../../../store/hooks";

type ColorType = "primary" | "warning" | "success" | "neutral" | "danger" | undefined;

function TagCard({ tag }: TagCardProps) {
    const navigation = useNavigate();
    const entityType = tag.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>
            <Card
                variant="solid"
                color={entityTypeChip[entityType].color}
                invertedColors
                orientation="horizontal"
                sx={{
                    width: 320,
                    '&:hover': { boxShadow: 'md', borderColor: 'neutral.outlinedHoverBorder' },
                }}
            >
                <AspectRatio ratio="1" sx={{ width: 50 }}>
                    {entityTypeChip[entityType].icon}
                </AspectRatio>
                <CardContent>
                    <Typography level="title-lg" id="card-description">
                        {tag.name}
                    </Typography>
                    <Typography level="body-sm" aria-describedby="card-description" mb={1}>
                        <Link 
                            component={RouterLink}
                            to={`/tags/${tag.name}`}
                            overlay
                            underline="none"
                            sx={{ color: 'text.tertiary' }}
                        >
                            {tag.entity_type}
                        </Link>
                    </Typography>
                    <Chip
                        variant="outlined"
                        color="primary"
                        size="sm"
                        sx={{ pointerEvents: 'none' }}
                    >
                        Created at {dayjs(tag.created_at).format('DD MMM YYYY')}                    </Chip>
                </CardContent>
            </Card>
        </div>
    );
};

export default TagCard;