import * as React from 'react';
import CssBaseline from '@mui/material/CssBaseline';
import Box from '@mui/material/Box';
import Container from '@mui/material/Container';
import StandardImageList from './gallery';
import Divider from '@mui/material/Divider';
import Grid from '@mui/material/Unstable_Grid2';
import ImageAvatars from './avatar';
import BasicCard from './user_data';
import AddAPhotoRoundedIcon from '@mui/icons-material/AddAPhotoRounded';
// import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
// import Container from '@mui/material/Container';
import { Link } from 'react-router-dom';




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

import { actionFindUserOne } from '../redux/action';

console.log('action: ', actionFindUserOne)

function User({ user = {}, loadUser }) {

    const { userId } = useParams()

    useEffect(() => { loadUser(userId) }, [userId])

    console.log('userID: ', { userId })
    console.log('user: ', user)

    return (
        <React.Fragment>
            {/* <CssBaseline /> */}
            <Container sx={{ minHeight: '100vh' }} maxWidth="100%" >
                <Box sx={{ margin: "30px 10px" }}>
                    <Grid container spacing={2}>
                        <Grid xs={3}>
                            <Container>
                                <ImageAvatars userData={user} />
                            </Container>
                        </Grid>
                        <Grid xs={9}>
                            <BasicCard userData={user} />
                        </Grid>

                        <Container>
                            <Link to="/createpost" style={{ textDecoration: 'none' }}>
                                <Button variant="contained" startIcon={<AddAPhotoRoundedIcon />} onClick={() => (console.log('click add'))}>
                                    Добавить пост
                                </Button>
                            </Link>
                        </Container>
                    </Grid>
                </Box>

                <Divider />

                <Box >
                    <StandardImageList />
                </Box>
            </Container>
        </React.Fragment >
    );
}

export const CUser = connect(state => ({ user: state?.UserFindOne?.payload }), { loadUser: actionFindUserOne })(User)

