import * as React from 'react';
import { useEffect } from 'react';
import { useParams } from 'react-router-dom';
import { connect } from 'react-redux';
import { store } from '../redux';

import { Box, Container, Divider } from '@mui/material';

import BasicCard from './userData';
// import { actionFindUserOne, actionFullUserFindOne } from '../redux/action';
import { actionFindUserOne, actionFullUserFindOne } from '../redux/thunks';

import { StandardImageList, СStandardImageList } from './gallery';

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


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


    // собираем все _id подписчиков в один массив - !!!!!!!!!!!!!!!!!!!!!! РАБОТАЕТ НЕКОРРЕКТНО
    const promiceStatus = store.getState()?.promise?.UserFindOne?.status
    const followingsArr = []

    if (promiceStatus === 'FULFILLED' && user?.following) {
        // console.log(999, user.following)
        for (let id of (user.following)) {
            for (let [key, value] of Object.entries(id)) {
                if (key === '_id') {
                    followingsArr.push(value)
                }
            }
        }
    }

    return (
        <React.Fragment>
            <Container sx={{ minHeight: '100vh' }} maxWidth="100%" >
                <Box sx={{ margin: "30px 50px" }}>
                    <BasicCard userData={user} />
                </Box>

                <Divider />

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

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

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





















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

// export const CUser = connect(state => ({ user: state?.promise }), { loadUser: actionFullUserFindOne })(User)