import * as React from 'react';
import { useState, useEffect } from 'react';
import { connect, useDispatch, useSelector } from 'react-redux';
import { useHistory } from "react-router-dom";
import { store } from '../../redux';

import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import Container from '@mui/material/Container';
import SendRoundedIcon from '@mui/icons-material/SendRounded';

import { StyledDropzone } from './dropzone';
// import { actionFilesUpload, actionCreatePost, actionFullCreatePost } from '../redux/action';
import { actionFilesUpload, actionFullCreatePost } from '../../redux/thunks';
import { actionCreatePost } from '../../redux/action';
import HighlightOffRoundedIcon from '@mui/icons-material/HighlightOffRounded';
import { Dnd } from './dnd';
import { UploadedFiles } from './uploaded_files';


export const CreatePost = () => {
    const [post, setPost] = useState({ title: '', text: '', images: [] })
    // console.log(1, "postMain: ", post)

    // создаем объект с данными из форм для отправки на бек
    // const newPostData = ({ ...post, images: ((post.images).map(item => `{_id:${item._id}}`)) })
    const newPostData = ({ ...post, images: ((post.images).map(item => ({ _id: item._id }))) })
    // console.log(33, newPostData)

    // const imgForCreatePost = (post.images).map(item => item._id)
    // console.log('images arr: ', imgForCreatePost)

    const dispatch = useDispatch()


    // вот эту часть нужно будет сделать через connect
    const images = useSelector(state => state.promise?.FilesUpload?.payload)

    useEffect((() => {
        if (images) {
            setPost({ ...post, images: [...post.images, ...images] })
        }
    }), [images])


    const deleteImage = image => setPost({ ...post, images: post.images.filter(i => i !== image) })

    const localPostImage = ({ image }) => <UploadedFiles image={image}
        onDelete={imgToDelete => deleteImage(imgToDelete)} />


    // создаем новый пост и переходим на его страницу
    const history = useHistory()

    const newPost = useSelector(state => state.promise?.CreatePost?.payload?._id)
    // console.log('newPost', newPost)



    // какого хуя не работает await
    const onSend = async (data) => {
        await store.dispatch(actionFullCreatePost(data));

        if (newPost) {
            // console.log('щас пойдем на переход', newPost)
            history.push(`/post/${newPost}`);
        }
    }





    return (
        <Container maxWidth="90%">
            <Container>
                <StyledDropzone onFiles={files => dispatch(actionFilesUpload(files))} onPost={post} />
            </Container>


            <Dnd items={post.images} render={localPostImage} itemProp="image" keyField="_id"
                onChange={images => setPost({ ...post, images })}
                horizontal
            />

            <Box
                component="form"
                sx={{
                    '& > :not(style)': { m: 1, width: '100%', marginBottom: '20px' },
                }}
            >
                <TextField
                    id="title"
                    label="Название поста"
                    variant="standard"
                    onChange={e => setPost({ ...post, title: e.target.value })}
                    value={post.title}

                />
            </Box>

            <Box
                component="form"
                sx={{
                    '& .MuiTextField-root': { m: 1, width: '100%', marginBottom: '20px' },
                }}
            >
                <TextField
                    id="text"
                    label="Описание поста"
                    multiline
                    rows={2}
                    variant="standard"
                    onChange={e => setPost({ ...post, text: e.target.value })}
                    value={post.text}
                />
            </Box>

            <Stack spacing={2} direction="row" >
                <Button
                    variant="outlined"
                    startIcon={
                        <SendRoundedIcon
                            style={{ transform: 'translate(3px, -4px) rotate(-30deg)' }}
                        />}
                    // onClick={() => { dispatch(actionCreatePost(newPostData)) }}

                    onClick={() => onSend(newPostData)}
                >
                    Опубликовать пост
                </Button>
            </Stack >
        </Container >
    )
}