import { url } from "../../App";
import { useHistory } from "react-router-dom";

import './style.scss'

import {
    Card,
    CardHeader,
    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 CCommentsFeed from "./comments_feed";
import CommentField from "./comment_field";


export function CardPost({ 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 toAccount() {
        history.push(`/user/${postData?.owner?._id}`)
    }

    function addCommentFocus() {
        document.getElementById('addCommentField').focus()
    }


    return (
        <Card
            sx={{
                display: 'flex',
                flexDirection: 'column',
                minHeight: '80vh',
                borderRadius: 0
            }}
        >
            <CardHeader
                avatar={
                    <Avatar
                        alt={postData?.owner?.login}
                        src={(url + postData?.owner?.avatar?.url)}
                        sx={{
                            width: 50,
                            height: 50
                        }}
                    />
                }

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

                subheader={dateofPostParse}
            />

            <Divider />

            <CardContent
                className='post-comments'

                sx={{
                    flex: '0 0 450px',
                    overflowY: 'auto',
                }}
            >
                <Grid
                    container
                    spacing={2}
                    sx={{
                        marginBottom: 3
                    }}
                >
                    <Grid
                        xs={2}
                        sx={{
                            flex: '0 0 45px'
                        }}
                    >
                        <Avatar
                            alt={postData?.owner?.login}
                            src={(url + postData?.owner?.avatar?.url)}
                            sx={{
                                width: 40,
                                height: 40
                            }}
                        />
                    </Grid>

                    <Grid
                        xs={10}
                    >
                        <Typography
                            variant="subtitle2"
                            color="text.secondary"
                            sx={{
                                cursor: 'pointer',
                                width: 'fit-content'
                            }}
                            onClick={toAccount}
                        >
                            {postData?.owner?.login}
                        </Typography>

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

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

                <Grid>
                    {/* <CommentsFeed data={postData?.comments} /> */}
                    <CCommentsFeed />
                </Grid>
            </CardContent>

            <Divider />

            <CardActions disableSpacing>
                <Box
                    sx={{
                        flexGrow: 1
                    }}>
                    <Grid
                        xs={12}
                        container
                        justifyContent="space-between"
                        alignItems="center"
                        sx={{
                            fontSize: '12px'
                        }}
                    >
                        <Grid container>
                            <Grid>
                                <IconButton
                                    aria-label="add to favorites"
                                    onClick={() => (console.log('click like main post'))}
                                >
                                    <FavoriteBorderRounded />
                                </IconButton>
                            </Grid>

                            <Grid>
                                <IconButton
                                    onClick={addCommentFocus}
                                >
                                    <ChatBubbleOutline />
                                </IconButton>
                            </Grid>

                            <Grid>
                                <IconButton
                                    aria-label="share"
                                >
                                    <Send />
                                </IconButton>
                            </Grid>
                        </Grid>

                        <Grid>
                            <IconButton>
                                <TurnedInNot />
                            </IconButton>
                        </Grid>
                    </Grid>

                    <Grid container>
                        <Typography
                            variant="subtitle1"
                            color="text.secondary"
                            sx={{
                                padding: 1
                            }}
                        >
                            Нравится: {postData.likesCount ? postData.likesCount : '0'}
                        </Typography>
                    </Grid>
                </Box>
            </CardActions>

            <Divider />

            <CardActions>
                <CommentField />
            </CardActions>
        </Card>
    )
}