import { useEffect } from "react";
import { useAppDispatch, useAppSelector } from "../../store/hooks";
import { fetchNewsItem } from "../../store/newsItemSlice";
import { useParams } from "react-router-dom";
import { Box, CircularProgress, Typography, Stack, Chip, Avatar } from "@mui/joy";
import ArticleCard from "./cards/ArticleCard";
import dayjs from "dayjs";
import NewsChannelChip from "./chips/NewsChannelChip";
import AnalysisResultCard from "./cards/AnalysisResultCard";
import SellIcon from '@mui/icons-material/Sell';
import SentimentVerySatisfiedIcon from '@mui/icons-material/SentimentVerySatisfied';
import SentimentChip from "./chips/SentimentChip";

function Article() {
    const { id } = useParams();

    const newsItem = useAppSelector((state) => state.newsItem.newsItem);
    const status = useAppSelector((state) => state.newsItem.status);
    const dispatch = useAppDispatch();

    useEffect(() => {
        dispatch(fetchNewsItem(Number(id)));
    }, [dispatch, id]);

    return (
        <div>
            {status === 'loading' ? <Box sx={{ display: 'flex', justifyContent: 'center' }}>
                <CircularProgress thickness={1} />
            </Box> :
                <Stack spacing={2}>
                    <Typography level="h1" component="h2">
                        Article
                    </Typography>

                    <Typography level="h2" component="h3">
                        {newsItem.title}
                    </Typography>

                    <Stack
                        direction="row"
                        justifyContent="space-between"
                        alignItems="center"
                        spacing={2}
                    >
                        <Stack
                            direction="row"
                            justifyContent="flex-start"
                            alignItems="center"
                            spacing={1}>
                            <NewsChannelChip newsChannel={newsItem.news_channel} />
                            {newsItem.sentiment_result ? <SentimentChip sentimentResult={newsItem.sentiment_result} /> : ''}
                        </Stack>


                        <Typography level="body-sm">
                            {dayjs(newsItem.pub_date).fromNow()} |
                            Published at {dayjs(newsItem.pub_date).format('DD MMM YYYY')} |
                            Imported at {dayjs(newsItem.created_at).format('DD MMM YYYY HH:mm')}
                        </Typography>

                    </Stack>

                    <Stack spacing={2}>
                        <ArticleCard newsItem={newsItem} />

                        <Stack spacing={2}>
                            <Typography level="h3" component="h4">
                                AI Analysis
                            </Typography>

                            <Typography level="body-md">
                                The AI analyis consists of sentiment analysis and named entity recognition. The sentiment analysis is used to determine the sentiment of the article, while the named entity recognition is used to determine the named entities / tags of the article.
                                Results are stored once for each article and are not updated. The results are displayed below.
                            </Typography>
                            <Typography level="body-md">
                                {newsItem.sentiment_result && newsItem.sentiment_result.created_at ?
                                    <Chip
                                        startDecorator={<SentimentVerySatisfiedIcon />}
                                        size="md"
                                        variant="outlined"
                                    >
                                        Sentiment analysis created at {dayjs(newsItem.sentiment_result.created_at).format('DD MMM YYYY HH:mm')}
                                    </Chip>
                                    :
                                    'This articles sentiment has not been analyzed yet. Visit later to see the results.'
                                }
                            </Typography>
                            <Typography level="body-md">
                                {newsItem.ner_result && newsItem.ner_result.created_at ?
                                    <Chip
                                        startDecorator={<Avatar variant="outlined"><SellIcon /></Avatar>}
                                        size="md"
                                        variant="outlined"
                                    >
                                        Named entity analysis created at {dayjs(newsItem.sentiment_result.created_at).format('DD MMM YYYY HH:mm')}
                                    </Chip>
                                    :
                                    'This articles named entities / tags have not been analyzed yet or there are none. Visit later to see the results.'
                                }
                            </Typography>

                            {newsItem.sentiment_result || newsItem.ner_result ?
                                <AnalysisResultCard sentimentResult={newsItem.sentiment_result} nerResult={newsItem.ner_result} />
                                : ''}
                        </Stack>
                    </Stack>
                </Stack>}
        </div>
    );
}

export default Article;