import * as React from 'react';
import { connect } from 'react-redux';
import { store } from '../redux';
// import { url } from '../../App';

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

import { actionfindPosts, actionFindUserOne } from '../redux/action';
import { RecipeReviewCard as Card } from './card_feed';
import AboutMe from './aboutMe';

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

const myId = ((JSON.parse(atob(localStorage.authToken.split('.')[1]))).sub.id)

function Feed({ feed = [], me = {} }) {

    return (
        <Container sx={{
            width: '80%',
            mt: 1
        }}>
            <Box sx={{ flexGrow: 1 }}>
                <Grid2 container spacing={2}>
                    <Grid2 xs={7}>
                        <Item sx={{
                            width: 500
                        }}>
                            <Stack spacing={2}>
                                {feed.map(post => <Item key={post._id}><Card postData={post} /></Item>)}
                            </Stack>
                        </Item>
                    </Grid2>
                    <Grid2 xs={5}>
                        <Item sx={{
                            position: 'fixed'
                        }}>
                            <Me me={me} />
                        </Item>
                    </Grid2>
                </Grid2>
            </Box>
        </Container>
    )
}

store.dispatch(actionfindPosts())
store.dispatch(actionFindUserOne(myId)) // скорее всего нужно будет переписать все через connect

const Me = connect(state => ({ me: state?.promise?.UserFindOne?.payload }))(AboutMe)

export const ReduxFeed = connect(state => ({ feed: state?.promise?.PostsFind?.payload }))(Feed)