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, actionFeedFindOne, actionFeedFind } 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',
}))

// забираем свой id из localStorage
// const myId = ((JSON.parse(atob(localStorage.authToken.split('.')[1])))?.sub?.id)
let myId
if (localStorage.authToken !== undefined) {
    myId = (JSON.parse(atob(localStorage?.authToken?.split('.')[1]))).sub.id
}

// запрос на ленту постов моих подписчиков
const arr = ["5d6fccfc5fce6722147978f2", "5d66e01dc6a7071408ac1e1c"]
const sort = -1







function Feed({ feed, me = {} }) {
    console.log('feed: ', feed)
    console.log('testFeed: ', store.getState().promise?.Feed?.status === 'FULFILLED')

    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 && 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>
    )
}

// ===========================
// test
store.dispatch(actionFeedFind(myId, sort))

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








// ==============================
// загружаем список подписчиков
// store.dispatch(actionFeedFindOne(arr, sort))
// export const ReduxFeed = connect(state => ({ feed: state?.promise?.Feed?.payload }))(Feed)

// загрузка данных залогиненого пользователя справа(скорее всего нужно будет переписать все через connect)
// store.dispatch(actionFindUserOne(myId))
// const Me = connect(state => ({ me: state?.promise?.UserFindOne?.payload }))(AboutMe)
// ===============================



















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