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

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

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

// const myId = (JSON.parse(atob(localStorage?.authToken?.split('.')[1]))).sub.id


let myId
if (localStorage.authToken !== undefined) {
    myId = (JSON.parse(atob(localStorage?.authToken?.split('.')[1]))).sub.id
}

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

    const { userId } = useParams()

    if (userId === myId) {
        return (
            <Button variant="outlined" startIcon={<ManageAccountsOutlinedIcon />} disableRipple>Редактировать аккаунт</Button>
        )
    }
}

// блок пользовательских данных
export default function BasicCard({ userData }) {
    console.log(6775, userData)

    const urlAvatar = url.slice(0, -7) + userData?.avatar?.url

    return (
        <Container sx={{ display: 'flex' }}>
            <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 direction="row" spacing={2}>
                        <Typography component="div" variant="h4">
                            {userData?.login}
                        </Typography>

                        <UptadeProfile />
                    </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">
                        {userData?.followers?.length || '0'} публикаций
                    </Typography>

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

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