// import React, { useState } from 'react';
// import { Avatar, Typography, Box, Stack, CardHeader, Backdrop, Modal, Fade, Divider, IconButton } from '@mui/material'
// import { Close } from '@mui/icons-material'
// import { useSelector, connect } from 'react-redux'
// import { useHistory } from 'react-router-dom'

// import { RecommendedCard } from './recommended';

// import './style.scss'

// import { url } from "../../App"


// const style = {
//     position: 'absolute',
//     top: '50%',
//     left: '50%',
//     transform: 'translate(-50%, -50%)',
//     width: 400,
//     height: 'fit-content',
//     bgcolor: 'background.paper',
//     boxShadow: 24,
//     outline: 0,
//     borderRadius: 3,
//     padding: '5px 0'
// };




// function AboutMe({ aboutMe = {} }) {
//     let history = useHistory()

//     const myPostsCount = useSelector(state => state?.promise?.MyPostsCount?.payload)

//     function toMyAccount() {
//         history.push(`/user/${aboutMe?._id}`)
//     }

//     // функции управления открытием/закрытием модального окна
//     const [modalName, setModalName] = useState('')
//     const [modalArray, setModalArray] = useState([])
//     const [openModal, setOpenModal] = useState(false);
//     const handleOpenModal = (param) => {
//         setOpenModal(true)
//         setModalArray([...param.arr])
//         setModalName(param.name)
//     }

//     const handleCloseModal = () => setOpenModal(false);

//     return (
//         <Box sx={{
//             maxWidth: 400
//         }}>
//             <CardHeader
//                 avatar={
//                     <Avatar
//                         sx={{ width: 50, height: 50 }}
//                         alt={aboutMe?.login}
//                         src={url + aboutMe?.avatar?.url}
//                     />
//                 }

//                 subheader={
//                     <Typography
//                         sx={{
//                             cursor: 'pointer'
//                         }}
//                         variant='h6'
//                         onClick={toMyAccount}>
//                         {aboutMe?.login}
//                     </Typography>
//                 }
//             />
//             <Stack
//                 sx={{
//                     paddingTop: '5px',
//                     paddingLeft: '20px',
//                     flexWrap: 'wrap'
//                 }}
//                 direction="row"
//                 spacing={1}
//                 padding={2}>
//                 <Typography
//                     sx={{
//                         cursor: 'pointer'
//                     }}
//                     onClick={toMyAccount}
//                 >
//                     {myPostsCount || '0'} публикаций
//                 </Typography>
//                 <Typography
//                     sx={{
//                         cursor: 'pointer'
//                     }}
//                     onClick={() => handleOpenModal({ arr: aboutMe?.followers, name: 'Ваши подписчики' })}
//                 >
//                     {aboutMe?.followers?.length || '0'} подписчиков
//                 </Typography>
//                 <Typography
//                     sx={{
//                         cursor: 'pointer'
//                     }}
//                     onClick={() => handleOpenModal({ arr: aboutMe?.following, name: 'Ваши подписки' })}
//                 >
//                     {aboutMe?.following?.length || '0'} подписок
//                 </Typography>
//             </Stack>

//             {modalArray && <Modal
//                 aria-labelledby="transition-modal-title"
//                 aria-describedby="transition-modal-description"
//                 open={openModal}
//                 onClose={handleCloseModal}
//                 closeAfterTransition
//                 slots={{ backdrop: Backdrop }}
//                 slotProps={{
//                     backdrop: {
//                         timeout: 500,
//                     },
//                 }}
//             >
//                 <Fade in={openModal}>
//                     <Box sx={style}>
//                         <Stack
//                             direction="row"
//                             justifyContent="space-between"
//                             alignItems="center"
//                             sx={{
//                                 padding: '0 24px'
//                             }}>
//                             <Typography
//                                 variant="subtitle1"
//                                 color='text.primary'
//                                 gutterBottom
//                             >
//                                 {modalName}
//                             </Typography>

//                             <IconButton
//                                 onClick={handleCloseModal}
//                                 title='Закрыть'
//                             >
//                                 <Close
//                                     sx={{
//                                         position: 'absolute',
//                                         color: 'black'
//                                     }}
//                                     fontSize='medium'
//                                 />
//                             </IconButton>
//                         </Stack>

//                         <Divider />

//                         <Box
//                             className='recommendedBox'
//                             sx={{
//                                 margin: '8px 0',
//                                 width: '95%',
//                                 paddingLeft: '8px',
//                                 minHeight: 'fit-content',
//                                 maxHeight: 350,
//                                 overflowY: 'auto'
//                             }}>
//                             {modalArray.map(item => <RecommendedCard key={item._id} data={item} />)}
//                         </Box>
//                     </Box>
//                 </Fade>
//             </Modal>}
//         </Box>

//     )
// }

// export const CAboutMe = connect(state => ({ aboutMe: state?.promise?.AboutMe?.payload }))(AboutMe)










import React, { useContext } from 'react';
import { Avatar, Typography, Box, Stack, CardHeader, Backdrop, Modal, Fade, Divider, IconButton } from '@mui/material'
import { Close } from '@mui/icons-material'
import { useSelector, connect } from 'react-redux'
import { useHistory } from 'react-router-dom'

import { RecommendedCard } from './recommended';
import { ModalWindow } from '../structure/modal';
import { ModalForCountsContext } from "../../App";

import './style.scss'

import { url } from "../../App"


const style = {
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    width: 400,
    height: 'fit-content',
    bgcolor: 'background.paper',
    boxShadow: 24,
    outline: 0,
    borderRadius: 3,
    padding: '5px 0'
};




function AboutMe({ aboutMe = {} }) {
    let history = useHistory()

    const myPostsCount = useSelector(state => state?.promise?.MyPostsCount?.payload)

    function toMyAccount() {
        history.push(`/user/${aboutMe?._id}`)
    }

    // // функции управления открытием/закрытием модального окна
    // const [modalName, setModalName] = useState('')
    // const [modalArray, setModalArray] = useState([])
    // const [openModal, setOpenModal] = useState(false);
    // const handleOpenModal = (param) => {
    //     setOpenModal(true)
    //     setModalArray([...param.arr])
    //     setModalName(param.name)
    // }

    // const handleCloseModal = () => setOpenModal(false);

    // контекст модального окна
    const [modalName, setModalName, modalArray, setModalArray, openModal, setOpenModal, handleOpenModal, handleCloseModal] = useContext(ModalForCountsContext)

    return (
        <Box sx={{
            maxWidth: 400
        }}>
            <CardHeader
                avatar={
                    <Avatar
                        sx={{ width: 50, height: 50 }}
                        alt={aboutMe?.login}
                        src={url + aboutMe?.avatar?.url}
                    />
                }

                subheader={
                    <Typography
                        sx={{
                            cursor: 'pointer'
                        }}
                        variant='h6'
                        onClick={toMyAccount}>
                        {aboutMe?.login}
                    </Typography>
                }
            />
            <Stack
                sx={{
                    paddingTop: '5px',
                    paddingLeft: '20px',
                    flexWrap: 'wrap'
                }}
                direction="row"
                spacing={1}
                padding={2}>
                <Typography
                    sx={{
                        cursor: 'pointer'
                    }}
                    onClick={toMyAccount}
                >
                    {myPostsCount || '0'} публикаций
                </Typography>
                <Typography
                    sx={{
                        cursor: 'pointer'
                    }}
                    onClick={() => handleOpenModal({ arr: aboutMe?.followers, name: 'Ваши подписчики' })}
                >
                    {aboutMe?.followers?.length || '0'} подписчиков
                </Typography>
                <Typography
                    sx={{
                        cursor: 'pointer'
                    }}
                    onClick={() => handleOpenModal({ arr: aboutMe?.following, name: 'Ваши подписки' })}
                >
                    {aboutMe?.following?.length || '0'} подписок
                </Typography>
            </Stack>

            {modalArray && <ModalWindow />
                //     <ModalWindow
                //     aria-labelledby="transition-modal-title"
                //     aria-describedby="transition-modal-description"
                //     open={openModal}
                //     onClose={handleCloseModal}
                //     closeAfterTransition
                //     slots={{ backdrop: Backdrop }}
                //     slotProps={{
                //         backdrop: {
                //             timeout: 500,
                //         },
                //     }}
                // >
                //     <Fade in={openModal}>
                //         <Box sx={style}>
                //             <Stack
                //                 direction="row"
                //                 justifyContent="space-between"
                //                 alignItems="center"
                //                 sx={{
                //                     padding: '0 24px'
                //                 }}>
                //                 <Typography
                //                     variant="subtitle1"
                //                     color='text.primary'
                //                     gutterBottom
                //                 >
                //                     {modalName}
                //                 </Typography>

                //                 <IconButton
                //                     onClick={handleCloseModal}
                //                     title='Закрыть'
                //                 >
                //                     <Close
                //                         sx={{
                //                             position: 'absolute',
                //                             color: 'black'
                //                         }}
                //                         fontSize='medium'
                //                     />
                //                 </IconButton>
                //             </Stack>

                //             <Divider />

                //             <Box
                //                 className='recommendedBox'
                //                 sx={{
                //                     margin: '8px 0',
                //                     width: '95%',
                //                     paddingLeft: '8px',
                //                     minHeight: 'fit-content',
                //                     maxHeight: 350,
                //                     overflowY: 'auto'
                //                 }}>
                //                 {modalArray.map(item => <RecommendedCard key={item._id} data={item} />)}
                //             </Box>
                //         </Box>
                //     </Fade>
                // </ModalWindow>
            }
        </Box>

    )
}

export const CAboutMe = connect(state => ({ aboutMe: state?.promise?.AboutMe?.payload }))(AboutMe)