import { useContext } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useHistory } from "react-router-dom";

import { Typography, Box, Stack, Backdrop, Modal, Fade, Divider, IconButton, Avatar, Button, CardHeader } from '@mui/material'
import { Close } from '@mui/icons-material'

import { ModalForCountsContext, UpdateProfile } from "../../App";
import { actionFullUpdateProfile } from "../redux/thunks";
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'
};


export function ModalWindow() {

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


    return (
        <div>
            <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 >
        </div>
    )
}



// Компонент карточка юзера с кнопкой подписки/отписки (нужно делать всегда двойную проверку data.owner.id || data.id, потому что у нас разные сущности на лайках и на подписчиках)
function RecommendedCard({ data }) {
    console.log('dataIncard: ', data)

    const history = useHistory()
    const dispatch = useDispatch()

    // контекст обновления профиля
    const [updateProfile, setUpdateProfile] = useContext(UpdateProfile)
    console.log('updateProfile: ', updateProfile)

    // проверка, является ли пользователь моим подписчиком
    const myData = useSelector(state => state?.promise?.AboutMe?.payload)
    const isFollowing = myData?.following && (myData?.following).some(item => item._id === (data?.owner?._id || data?._id))

    // мой id
    const myid = myData?._id

    // переход на аккаунт
    function toAccount() {
        history.push(data?.owner?._id ? `/user/${data?.owner?._id}` : `/user/${data?._id}`)
    }


    // какого-то хуя не работает((
    function isSubscribing() {
        console.log('подписка или отписка при клике на юзера в модальном окне')

        if (isFollowing) {

            console.log('updateProfile START: ', updateProfile)

            setUpdateProfile({ ...updateProfile, following: updateProfile.following.filter(item => item?._id !== data?.owner?._id) })

        } else {
            setUpdateProfile({ ...updateProfile, following: [...updateProfile.following, { _id: data.owner._id }] })
        }

        // 
        console.log('updateProfile END: ', updateProfile)
        dispatch(actionFullUpdateProfile(updateProfile))
    }

    return (
        <CardHeader
            avatar={
                <Avatar
                    src={url + (data?.owner?.avatar?.url || data?.avatar?.url)}
                    aria-label="recipe"
                    sx={{ width: 36, height: 36 }}
                />
            }

            // action={
            //     <Button
            //         variant="text"
            //         size="small"
            //         onClick={() => console.log('подписка или отписка при клике на юзера в модальном окне')}
            //     >
            //         {isFollowing ? 'Отписаться' : 'Подписаться'}
            //     </Button>
            // }
            action={ //сначала проверка на меня. если не я, рисуем кнопку
                ((data?.owner?._id || data?._id) != myid) && <Button
                    variant="text"
                    size="small"
                    onClick={isSubscribing}
                >
                    {isFollowing ? 'Отписаться' : 'Подписаться'}
                </Button>
            }

            title={
                <Typography
                    sx={{
                        cursor: 'pointer',
                        width: 'fit-content'
                    }}
                    variant="subtitle2"
                    color='text.secondary'
                    onClick={toAccount}
                >
                    {data?.owner?.login || data?.login || 'anon user'}
                </Typography>
            }
        />
    )
}