import * as React from 'react';
import { useParams } from 'react-router-dom';
import { useSelector } from 'react-redux';

import { CardContent, Typography, Button, Stack, Avatar, Box, Container } from '@mui/material';
import { ManageAccountsOutlined, PersonRemoveRounded, PersonAddRounded } from '@mui/icons-material';
import PersonRemoveRoundedIcon from '@mui/icons-material/PersonRemoveRounded';

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


// блок пользовательских данных
export default function BasicCard({ userData }) {
    const urlAvatar = url + userData?.avatar?.url

    // определяем количество постов пользоваеля
    const userPostsCount = useSelector(state => state?.promise?.UserPostsCount?.payload)

    // определяем мой id
    const myId = useSelector(state => state?.auth?.payload?.sub?.id)
    // определяем всех моих подписчиков
    const myFollowingList = (useSelector(state => state?.promise?.AboutMe?.payload?.following))?.map(user => user._id)

    function userFollowers() {
        console.log('click on Followers')
    }

    function userFollowing() {
        console.log('click on Following')
    }


    // Функция отображения кнопки редактирования своего профиля/отписки или подписки на другого юзера
    function UptadeProfileButton() {

        // вырезаем ид юзера из адресной строки
        const { userId } = useParams()

        if (userId === myId) {
            return (
                <Button
                    sx={{
                        minWidth: '300px',
                        backgroundColor: '#ebebeb',
                        border: 'none'
                    }}
                    color='inherit'
                    variant="outlined"
                    startIcon={
                        <ManageAccountsOutlined
                            color='inherit'
                        />}
                    disableRipple
                    onClick={() => console.log('Нажал редактировать профиль')}
                >
                    Редактировать аккаунт
                </Button>
            )
        }

        if (myFollowingList.includes(userId)) {
            return (
                <Button
                    sx={{
                        minWidth: '300px',
                        backgroundColor: '#ebebeb',
                        border: 'none'
                    }}
                    color='inherit'
                    variant="outlined"
                    startIcon={
                        <PersonRemoveRounded
                            color='inherit'
                        />}
                    disableRipple
                    onClick={() => console.log('Нажал отписаться')
                    }
                >
                    Отменить подписку
                </Button>
            )
        } else {
            return (
                <Button
                    sx={{
                        minWidth: '300px'
                    }}
                    startIcon={
                        <PersonAddRounded />
                    }
                    variant="contained"
                    disableRipple
                    onClick={() => console.log('Нажал подписаться')
                    }
                >
                    Подписаться
                </Button>
            )
        }
    }


    return (
        <Container sx={{
            display: 'flex',
            alignItems: 'center'
        }}
        >
            <Box>
                <Avatar alt={userData?.login} src={urlAvatar} sx={{
                    width: 150,
                    height: 150
                }}
                />
            </Box>

            <Box sx={{
                display: 'flex',
                flexDirection: 'column',
                marginLeft: '50px '
            }}
            >
                <CardContent sx={{
                    flex: '1 0 auto'
                }}
                >
                    <Stack
                        sx={{
                            justifyContent: 'space-between'
                        }}
                        direction="row"
                        spacing={2}
                    >
                        <Typography
                            component="div"
                            variant="h4"
                        >
                            {userData?.login}
                        </Typography>

                        <UptadeProfileButton />
                    </Stack>

                    <Typography
                        variant="subtitle1"
                        color="text.secondary"
                        component="div"
                    >
                        {userData?.nick || ''}
                    </Typography>
                </CardContent>

                <Stack
                    direction="row"
                    spacing={5}
                    padding={2}
                    paddingTop={1}
                >
                    <Typography
                        variant="subtitle1"
                    >
                        {userPostsCount || '0'} публикаций
                    </Typography>

                    <Typography
                        sx={{
                            cursor: 'pointer'
                        }}
                        variant="subtitle1"
                        onClick={userFollowers}
                    >
                        {userData?.followers?.length || '0'} подписчиков
                    </Typography>

                    <Typography
                        sx={{
                            cursor: 'pointer'
                        }}
                        variant="subtitle1"
                        onClick={userFollowing}
                    >
                        {userData?.following?.length || '0'} подписок
                    </Typography>
                </Stack>
            </Box>
        </Container>
    )
}