import * as React from 'react';
import AspectRatio from '@mui/joy/AspectRatio';
import Box from '@mui/joy/Box';
import Button from '@mui/joy/Button';
import Stack from '@mui/joy/Stack';
import Card from '@mui/joy/Card';
import CardContent from '@mui/joy/CardContent';
import CardOverflow from '@mui/joy/CardOverflow';
import Divider from '@mui/joy/Divider';
import Typography from '@mui/joy/Typography';
import Sheet from '@mui/joy/Sheet';
import { NewsItemCardProps } from "../../props/NewsItemCardProps";
import AnalysisResultCard from './AnalysisResultCard';
import { Link as RouterLink } from 'react-router-dom';
import Link from '@mui/joy/Link';
import './NewsItemCard.css';
import dayjs from "dayjs";
import relativeTime from 'dayjs/plugin/relativeTime';
import NewsChannelChip from "../chips/NewsChannelChip";
import SentimentChip from "../chips/SentimentChip";
dayjs.extend(relativeTime);

function NewsItemCard({ newsItem }: NewsItemCardProps) {

    return (
        <div className="news-item-card">

            <Card orientation="vertical">

                <CardContent>
                    <Card
                        orientation="horizontal"
                        sx={{
                            width: '100%',
                            flexWrap: 'wrap',
                            [`& > *`]: {
                                '--stack-point': '500px',
                                minWidth:
                                    'clamp(0px, (calc(var(--stack-point) - 2 * var(--Card-padding) - 2 * var(--variant-borderWidth, 0px)) + 1px - 100%) * 999, 100%)',
                            },
                        }}
                        variant="plain"
                        style={{ 'padding': 0 }}
                    >

                        {newsItem.thumbnail_url || newsItem.enclosure_url ?
                            <AspectRatio flex ratio="1" minHeight={182} maxHeight={182} sx={{ minWidth: 182, height: 182, }}>
                                <img
                                    src={newsItem.thumbnail_url ? newsItem.thumbnail_url : newsItem.enclosure_url}
                                    srcSet={newsItem.thumbnail_url ? newsItem.thumbnail_url : newsItem.enclosure_url}
                                    loading="lazy"
                                    alt=""
                                />
                            </AspectRatio> : ''}
                        <CardContent>

                                <Stack
                                    direction="row"
                                    justifyContent="space-between"
                                    alignItems="center"
                                    spacing={2}
                                >
                                    <NewsChannelChip newsChannel={newsItem.news_channel} />

                                    {newsItem.sentiment_result ? <SentimentChip sentimentResult={newsItem.sentiment_result} /> : ''}
                                </Stack>


                            <Typography fontSize="xl" fontWeight="lg">
                                {newsItem.title}
                            </Typography>
                            <Typography level="body-sm" fontWeight="lg" textColor="text.tertiary">
                                {newsItem.description}
                            </Typography>

                            <Box sx={{ display: 'flex', gap: 1.5 }}>
                                <Link component={RouterLink} to={`/article/${newsItem.id}`}>
                                    Read more...
                                </Link>
                            </Box>

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

                        </CardContent>

                    </Card>
                </CardContent>
                <CardOverflow variant="soft" sx={{ bgcolor: 'background.level1' }}>
                    <Divider inset="context" />
                    <CardContent orientation="horizontal">
                        <Typography level="body-xs" fontWeight="md" textColor="text.secondary">
                            Published at {dayjs(newsItem.pub_date).format('DD MMM YYYY')}
                        </Typography>
                        <Divider orientation="vertical" />
                        <Typography level="body-xs" fontWeight="md" textColor="text.secondary">
                            {dayjs(newsItem.pub_date).fromNow()}
                        </Typography>
                        <Divider orientation="vertical" />
                        <Typography level="body-xs" fontWeight="md" textColor="text.secondary">
                            Imported at {dayjs(newsItem.created_at).format('DD MMM YYYY HH:mm')}
                        </Typography>
                    </CardContent>
                </CardOverflow>
            </Card>



        </div>
    );
}

export default NewsItemCard;