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

import {
    Avatar,
    IconButton,
    Typography,
    Divider,
} from '@mui/material'

import Grid from '@mui/material/Unstable_Grid2';

import { FavoriteBorderRounded } from '@mui/icons-material/'
import { ModalForCountsContext } from "../../App";

import './style.scss'

import { CommentContext } from "./comments";
import { useContext } from "react";
import { useSelector } from "react-redux";


function CommentCard({ data }) {
    // console.log('data: ', data)

    const history = useHistory()

    // контекст поля ввода комментария
    const [comment, setComment] = useContext(CommentContext)

    // контекст модального окна
    const [modalName, setModalName, modalArray, setModalArray, openModal, setOpenModal, handleOpenModal, handleCloseModal] = useContext(ModalForCountsContext)

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

    // скрываем/открываем вложенные комментарии
    const [openComments, setOpenComments] = useState(`Показать ответы (${data?.answers.length})`)
    // скрываем/открываем блок с ответами на комментарии
    const [toggleAnswerToBlock, setToggleAnswerToBlock] = useState(false)

    // функция скрытия/открытия ответов на комменты
    async function toggleBlock() {
        setToggleAnswerToBlock(!toggleAnswerToBlock)

        return (openComments === (`Показать ответы (${data?.answers.length})`)
            // ? setOpenComments('Скрыть ответы')
            ? setOpenComments(`Скрыть ответы (${data?.answers.length})`)
            : setOpenComments(`Показать ответы (${data?.answers.length})`)
        )
    }

    // функция перехода на страницу профиля
    function toAccount(id) {
        history.push(`/user/${id}`)
    }

    // функция перевода фокуса в поле комментария при ответе на комментарий
    function addCommentFocus() {
        const inputField = document.getElementById('addCommentField')

        // ставим фокус на поле добавления комментариев
        inputField.focus()

        // добавляем ник, кому будем отвечать, в поле комментариев с припиской "@" и добавляем параметр answerTo для запроса на бек
        setComment({ ...comment, text: `@${data?.owner?.login} `, answerTo: { _id: data._id } })
    }


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

            <Grid
                xs={10.5}
                container
            >
                <Grid
                    xs={10}
                    sx={{
                        paddingBottom: 0
                    }}
                >
                    <Typography
                        variant="subtitle2"
                        color="text.secondary"
                        sx={{
                            cursor: 'pointer'
                        }}
                        onClick={() => toAccount(data?.owner?._id)}
                    >
                        {data?.owner?.login}
                    </Typography>

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

                <Grid
                    xs={2}
                    sx={{
                        paddingBottom: 0
                    }}
                >
                    <IconButton
                        onClick={() => (console.log('click like comment'))}
                    >
                        <FavoriteBorderRounded
                            fontSize='small'
                        />
                    </IconButton>
                </Grid>

                <Grid
                    xs={5.5}
                    sx={{
                        padding: 0,
                        paddingLeft: 1

                    }}
                >
                    <Typography
                        variant="caption"
                        color="text.disabled"
                        align='left'
                    >
                        {dateofPostParse}
                    </Typography>
                </Grid>

                <Grid
                    xs={3.5}
                    sx={{
                        padding: 0
                    }}
                >
                    <Typography
                        sx={{
                            cursor: 'pointer'
                        }}
                        variant="caption"
                        color="text.disabled"
                        align='left'
                        onClick={() => handleOpenModal({ arr: data?.likes, name: 'Отметки "Нравится"' })}
                    >
                        Нравится: {data?.likes?.length || '0'}
                    </Typography>
                </Grid>

                <Grid
                    xs={3}
                    sx={{
                        padding: 0,
                        paddingRight: 1
                    }}
                >
                    <Typography
                        variant="caption"
                        color="text.disabled"
                        align='left'
                        sx={{
                            cursor: 'pointer'
                        }}
                        onClick={addCommentFocus}
                    >
                        Ответить
                    </Typography>
                </Grid>

                <Grid
                    xs={12}
                    sx={{
                        padding: '0 8px'
                    }}
                >
                    {(data?.answers.length !== 0) &&
                        <Divider>
                            <Typography
                                variant="caption"
                                color="text.disabled"
                                sx={{
                                    cursor: 'pointer'
                                }}
                                onClick={() => toggleBlock(data?._id)}
                            >
                                {openComments}
                            </Typography>
                        </Divider>}
                </Grid>

                {toggleAnswerToBlock &&
                    <Grid xs={12}
                        sx={{
                            padding: '0 8px'
                        }}>
                        {data?.answers && (data?.answers).map(item => <CommentCard
                            data={item}
                            key={item._id}
                        />)}
                    </Grid>}
            </Grid>
        </Grid >
    )
}

export default CommentCard