import { useEffect } from 'react';
import { useParams } from 'react-router-dom';
import { connect } from 'react-redux';

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

import { actionFindPostOne } from '../../redux/action';
import { MyCarouselPost } from './carousel';
import { CardPost } from './comments';


const Item = styled(Paper)(() => ({
    borderRadius: 0,
    boxShadow: 'none',
}))


function Comments({ post = {}, loadPost }) {
    // console.log('post: ', post)

    const { postId } = useParams()
    useEffect(() => { loadPost(postId) }, [postId])

    return (
        <Box>
            <Grid2 container sx={{
                height: '80vh',
            }}>
                <Grid2 xs={7.5}>
                    <Item sx={{
                        backgroundColor: "black",
                        width: '100%',
                        height: '100%',
                        display: 'flex',
                        alignItems: 'center'
                    }}>
                        <MyCarouselPost postImages={post?.images} />
                    </Item>
                </Grid2>
                <Grid2 xs={4.5}>
                    <Item >
                        <div style={{ backgroundColor: "yellow" }}>
                            <CardPost postData={post} />
                        </div>
                    </Item>
                </Grid2>
            </Grid2>
        </Box>
    )
}

export const CComments = connect(state => ({ post: state?.promise?.PostFindOne?.payload }), { loadPost: actionFindPostOne })(Comments)