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

import { Box, Paper } from '@mui/material';
import { styled } from '@mui/material/styles';
import { Container } from '@mui/system';
import Grid2 from '@mui/material/Unstable_Grid2/Grid2';

// import { actionAboutMe, actionDownloadFeed } from '../redux/action';
import { actionAboutMe, actionDownloadFeed } from '../redux/thunks';
import { CardFeed } from './card_feed';
import { CAboutMe } from './aboutMe';




// // проверка скролла до конца страницы
// window.onscroll = function (ev) {
//     if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
//         console.log('долистал:  ', (window.innerHeight + window.scrollY), ' ', document.body.offsetHeight)


//     }
// };





// сам item для поста
const Item = styled(Paper)(() => ({
    padding: '0 10px',
    marginBottom: 10,
    borderRadius: 0,
    boxShadow: 'none',
}))

// function Feed({ feed, me = {} }) { // это первый вариант без useEffetc, а просто с store.dispatch
function Feed({ feed, loadFeed }) {

    const dispatch = useDispatch()
    const [posts, setPosts] = useState(feed)
    const newPosts = useSelector(state => state.feed?.AddFeed?.payload)

    useEffect((() => {
        console.log('newPosts: ', newPosts)
        if (newPosts) {
            setPosts({ ...posts, newPosts }) // вот этот вариант работает!!!
        }
    }), [newPosts])


    // проверка скролла до конца страницы
    window.onscroll = async function () {
        if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
            // const downloadedPosts = await store.dispatch(actionDownloadFeed(feed.length))
            const downloadedPosts = await dispatch(actionDownloadFeed(feed.length))

            // добавляем новые посты в общй массив постов
            downloadedPosts.map(post => feed.push(post))
        }
    }

















    useEffect(() => { loadFeed() }, []) // это второй вариант через useEffect

    return (
        <Container sx={{
            width: '90%',
            mt: 1
        }}>
            <Box sx={{ flexGrow: 1 }}>
                <Grid2 container spacing={2}>
                    <Grid2 xs={7}>
                        <Item>
                            {feed && feed.map(post => <Item key={post._id}><CardFeed postData={post} /></Item>)}
                        </Item>
                    </Grid2>
                    <Grid2 xs={5}>
                        <Item sx={{
                            position: 'fixed'
                        }}>
                            <CAboutMe />
                        </Item>
                    </Grid2>
                </Grid2>
            </Box>
        </Container>
    )
}

// export const CFeed = connect(state => ({ feed: state.promise?.MyFeed?.payload }), { loadFeed: actionAboutMe })(Feed)
export const CFeed = connect(state => ({ feed: state.feed?.MyFeed?.payload }), { loadFeed: actionAboutMe })(Feed)



// store.dispatch(actionAboutMe()) // это первый вариант без useEffetc, а просто с store.dispatch
// export const CFeed = connect(state => ({ feed: state.promise?.MyFeed?.payload }))(Feed) // это первый вариант без useEffetc, а просто с store.dispatch

// const CMe = connect(state => ({ me: state?.promise?.AboutMe?.payload }))(AboutMe) // это первый вариант когда все здесь находится












// загрузка ленты всех постов из базы
// store.dispatch(actionfindPosts())
// export const ReduxFeed = connect(state => ({ feed: state?.promise?.PostsFind?.payload }))(Feed)