import Card from '@mui/material/Card';
import CardHeader from '@mui/material/CardHeader';
import CardMedia from '@mui/material/CardMedia';
import CardContent from '@mui/material/CardContent';
import CardActions from '@mui/material/CardActions';
import Avatar from '@mui/material/Avatar';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import MoreVertIcon from '@mui/icons-material/MoreVert';
import FavoriteBorderRoundedIcon from '@mui/icons-material/FavoriteBorderRounded';
import SendIcon from '@mui/icons-material/Send';
import ChatBubbleOutlineIcon from '@mui/icons-material/ChatBubbleOutline';
import { Link } from 'react-router-dom';
import TurnedInNotIcon from '@mui/icons-material/TurnedInNot';
import Grid from '@mui/material/Unstable_Grid2';
import { MyCarousel } from './carousel';
import Box from '@mui/material/Box';

// урл бека
const url = 'http://hipstagram.node.ed.asmer.org.ua/'



export function RecipeReviewCard({ 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">
                        <MoreVertIcon />
                    </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">
                                        <FavoriteBorderRoundedIcon />
                                    </IconButton>
                                </Grid>
                                <Grid>
                                    <IconButton>
                                        <ChatBubbleOutlineIcon />
                                    </IconButton>
                                </Grid>
                                <Grid>
                                    <IconButton aria-label="share">
                                        <SendIcon />
                                    </IconButton>
                                </Grid>
                            </Grid>
                            <Grid sx={{ order: { xs: 1, sm: 2 } }}>
                                <IconButton>
                                    <TurnedInNotIcon />
                                </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 >
    )
}

// export default RecipeReviewCard