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

import { MyCarousel } from './carousel_feed';

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

export function CardFeed({ postData }) {
    // console.log('postData: ', postData)
    const history = useHistory()

    // формируем дату поста
    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()}`

    function toUser() {
        history.push(`/user/${postData?.owner?._id}`)
    }

    function toPost() {
        history.push(`/post/${postData?._id}`)
    }

    return (
        <Card sx={{
            maxWidth: 600
        }}>
            <CardHeader
                avatar={
                    <Avatar
                        sx={{ width: 50, height: 50 }}
                        alt={postData?.owner?.login}
                        src={url + postData?.owner?.avatar?.url}
                    />
                }

                // троеточие в хедере - нужно подумать, стоит ли его добавлять и что я ним буду делать
                // action={
                //     <IconButton aria-label="settings">
                //         <MoreVert />
                //     </IconButton>
                // }

                title={
                    <Typography
                        sx={{
                            cursor: 'pointer'
                        }}
                        onClick={toUser}
                    >
                        {postData?.owner?.login}
                    </Typography>
                }

                subheader={dateOfPostParse}
            />

            <CardMedia>
                <MyCarousel images={postData?.images} />
            </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?.likes?.length || '0'}
            </CardActions>

            <CardContent>
                <Typography variant="subtitle2" color="text.secondary">
                    {postData?.title}
                </Typography>
                <Typography variant="body2" color="text.secondary">
                    {postData?.text}
                </Typography>
            </CardContent>

            <CardActions>
                <Typography
                    sx={{
                        cursor: 'pointer'
                    }}
                    onClick={toPost}>
                    Посмотреть все комментарии ({postData?.comments?.length || '0'})
                </Typography>

            </CardActions>

            <Divider />
        </Card >
    )
}