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

import './style.scss'

import {
    IconButton,
    Typography,
    Box,
    TextField,
    Popover
} from '@mui/material'
import {
    SentimentSatisfiedAlt
} from '@mui/icons-material/'

import EmojiPicker from 'emoji-picker-react';

import { useState } from "react";
import { useDispatch } from "react-redux";

import { actionFullAddComment } from "../redux/thunks";
import { useParams } from "react-router-dom";


function CommentField() {
    // console.log('id: ', id)

    const { postId } = useParams()
    const dispatch = useDispatch()

    // отслеживаем состояние поля ввода комментария для поста
    const [comment, setComment] = useState({ text: '', post: { _id: postId } })
    console.log('params for new comment: ', comment)

    // открытие поповера emoji
    const [openPopover, setOpenPopover] = useState(null);
    const openEmoji = (event) => {
        setOpenPopover(event.currentTarget);
    }
    const closeEmoji = () => {
        setOpenPopover(null);
    }
    const open = Boolean(openPopover);
    const emojiField = open ? 'simple-popover' : undefined;


    function uploadComment() {
        // отправляем запрос на создание комментария
        dispatch(actionFullAddComment(comment, postId))

        // и чистим поле ввода комментария
        setComment({ ...comment, text: '' })
    }

    return (
        <Box
            sx={{
                display: 'flex',
                alignItems: 'flex-end',
                justifyContent: 'space-between',
                width: '100%'
            }}
        >
            <TextField
                id='addCommentField'
                variant="standard"
                multiline
                placeholder='Комментировать...'
                size="small"
                color="info"
                sx={{
                    margin: 1,
                    width: '100%',
                }}
                value={comment.text}
                onChange={e => setComment({ ...comment, text: e.target.value })}

                InputProps={{
                    startAdornment:
                        <Box>
                            <IconButton
                                aria-describedby={emojiField}
                                onClick={openEmoji}
                            >
                                <SentimentSatisfiedAlt
                                    fontSize='small'
                                />
                            </IconButton>

                            <Popover
                                id={emojiField}
                                open={open}
                                anchorEl={openPopover}
                                onClose={closeEmoji}
                                anchorOrigin={{
                                    vertical: 'top',
                                    horizontal: 'right',
                                }}
                                transformOrigin={{
                                    vertical: 'bottom',
                                    horizontal: 'left',
                                }}
                            >
                                <EmojiPicker
                                    searchPlaceHolder='Найти'
                                    emojiStyle='apple'
                                    width={300}
                                    height={450}
                                    onEmojiClick={
                                        e => setComment({ ...comment, text: comment.text + e.emoji })
                                    }
                                />
                            </Popover>
                        </Box>,

                    endAdornment:
                        <Box>
                            {comment.text !== '' && <Typography
                                variant='subtitle2'
                                color="primary.main"
                                align='center'
                                sx={{
                                    alignSelf: 'center',
                                    cursor: 'pointer',
                                    margin: '0 8px'
                                }}
                                onClick={uploadComment}
                            >
                                Отправить
                            </Typography>}
                        </Box>
                }}
            />
        </Box>
    )
}

export default CommentField