import React from 'react';
import { Box, Sheet, Stack, Typography, LinearProgress } from '@mui/joy';
import { AnalysisResultCardProps } from "../../props/AnalysisResultCardProps";
import { calcPercentage } from "../../../utils/uiUtils";
import NamedEntityChip from "../chips/NamedEntityChip";

function AnalysisResultCard({ sentimentResult, nerResult }: AnalysisResultCardProps) {

    const newSentiment = {
        titlePositive: calcPercentage(sentimentResult.title_positive),
        titleNegative: calcPercentage(sentimentResult.title_negative),
        titleNeutral: calcPercentage(sentimentResult.title_neutral),
        descriptionPositive: calcPercentage(sentimentResult.description_positive),
        descriptionNegative: calcPercentage(sentimentResult.description_negative),
        descriptionNeutral: calcPercentage(sentimentResult.description_neutral),
    };

    return (
        <div>

            <Sheet
                sx={{
                    bgcolor: 'background.level1',
                    borderRadius: 'sm',
                    p: 1.5,
                    my: 1.5,
                    display: 'flex',
                    gap: 5,
                    '& > div': { flex: 1 },
                }}
            >
                <div >
                    <Typography level="body-xs" fontWeight="lg">
                        Sentiment Rating
                    </Typography>

                    <Typography level="body-lg" fontWeight="lg">
                        <Stack
                            direction="column"
                            justifyContent="flex-start"
                            alignItems="stretch"
                            spacing={1}
                        >

                            <Typography level="body-xs" fontWeight="md">
                                Positive ({newSentiment.descriptionPositive}%)
                                <LinearProgress
                                    color="success"
                                    determinate
                                    thickness={3}
                                    value={newSentiment.descriptionPositive}
                                    variant="solid"
                                />
                            </Typography>

                            <Typography level="body-xs" fontWeight="md">
                                Negative ({newSentiment.descriptionNegative}%)
                                <LinearProgress
                                    color="danger"
                                    determinate
                                    thickness={3}
                                    value={newSentiment.descriptionNegative}
                                    variant="solid"
                                />
                            </Typography>

                            <Typography level="body-xs" fontWeight="md">
                                Neutral ({newSentiment.descriptionNeutral}%)
                                <LinearProgress
                                    color="primary"
                                    determinate
                                    thickness={3}
                                    value={newSentiment.descriptionNeutral}
                                    variant="solid"
                                />
                            </Typography>
                        </Stack>
                    </Typography>
                </div>

                <div>
                    <Typography level="body-xs" fontWeight="lg">
                        Tags Recognized
                    </Typography>
                    <Typography level="title-lg" fontWeight="lg">
                        <Box
                            role="group"
                            sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}
                        >
                            {nerResult ? nerResult.entities.map((namedEntity, index) => (
                                <NamedEntityChip key={index} namedEntity={namedEntity} />
                            )) : '-'}
                        </Box>
                    </Typography>
                </div>
            </Sheet>

        </div>
    );
}

export default AnalysisResultCard;