import * as React from 'react';
import { useEffect } from 'react';
import { connect } 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 } from '../redux/action';
import { CardFeed } from './card_feed';
import { CAboutMe } from './aboutMe';


// сам 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 }) {

    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)



// 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)