import { Card, CardHeader, CardMedia, CardContent, CardActions, Avatar, IconButton, Typography, Box } from '@mui/material'
import { MoreVert, FavoriteBorderRounded, Send, ChatBubbleOutline, TurnedInNot } from '@mui/icons-material/'
import Grid from '@mui/material/Unstable_Grid2';

import { Link } from 'react-router-dom';

import { MyCarousel } from './carousel_feed';

import { url } from '../../App';

export function RecipeReviewCard({ postData }) {
    // console.log('test ', postData)

    // формируем дату поста
    const dateofPost = new Date(+postData.createdAt)
    const months = ['января', 'февраля', 'марта', 'апреля', 'мая', 'июня', 'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря']
    const dateofPostParse = `${dateofPost.getDate() < 10 ? '0' + dateofPost.getDate() : dateofPost.getDate()} ${months[dateofPost.getMonth()]} ${dateofPost.getFullYear()}  ${dateofPost.getHours()}:${dateofPost.getMinutes() < 10 ? '0' + dateofPost.getMinutes() : dateofPost.getMinutes()}`

    // рисуем картинки на постах
    let imgOfPost
    if ((postData.images != null) && ((postData.images).length != 0)) {
        imgOfPost = url + postData.images[0].url
    }

    return (
        <Card sx={{ maxWidth: 500 }}>
            <CardHeader
                avatar={
                    <Avatar
                        alt=""
                        src="/images/avatar.jpeg"
                        sx={{ width: 50, height: 50 }}
                        style={{ margin: '5px', border: '3px solid black', borderRadius: '50%', flexShrink: '0', overflow: 'hidden' }}
                    />
                }
                action={   // троеточие в хедере
                    <IconButton aria-label="settings">
                        <MoreVert />
                    </IconButton>
                }
                title={
                    <Link to={`/user/${postData.owner._id}`}>
                        {postData.owner.login}
                    </Link>
                }

                subheader={dateofPostParse} // дата создания поста
            />
            <CardMedia>
                <MyCarousel />
            </CardMedia>
            <CardActions disableSpacing>
                <Box sx={{ flexGrow: 1 }}>
                    <Grid container spacing={2}>
                        <Grid
                            xs={12}
                            container
                            justifyContent="space-between"
                            alignItems="center"
                            flexDirection={{ xs: 'column', sm: 'row' }}
                            sx={{ fontSize: '12px' }}
                        >
                            <Grid container columnSpacing={1} sx={{ order: { xs: 2, sm: 1 } }}>
                                <Grid>
                                    <IconButton aria-label="add to favorites">
                                        <FavoriteBorderRounded />
                                    </IconButton>
                                </Grid>
                                <Grid>
                                    <IconButton>
                                        <ChatBubbleOutline />
                                    </IconButton>
                                </Grid>
                                <Grid>
                                    <IconButton aria-label="share">
                                        <Send />
                                    </IconButton>
                                </Grid>
                            </Grid>
                            <Grid sx={{ order: { xs: 1, sm: 2 } }}>
                                <IconButton>
                                    <TurnedInNot />
                                </IconButton>
                            </Grid>
                        </Grid>
                    </Grid>
                </Box>
            </CardActions>
            <CardActions>
                Нравится: {postData.likesCount ? postData.likesCount : '0'}
                {/* Нравится: {postData.likesCount || '0'} // сработает или нет - проверить */}
            </CardActions>
            <CardContent>
                <Typography variant="subtitle2" color="text.secondary">
                    {postData.title}
                </Typography>
                <Typography variant="body2" color="text.secondary">
                    {postData.text}
                </Typography>
            </CardContent>
            <CardActions>
                <Link to={`/post/${postData._id}`}>Посмотреть все комментарии (44)</Link>
            </CardActions>
        </Card >
    )
}