'use client';

import { Box, Typography, Avatar, Divider, Button } from '@mui/material';
import { IconExit } from '@/components/common/Icons';
import { useRouter } from 'next/navigation';
import useMainFetch from '@/hooks/useMainFetch';

export interface IUserData {
    name: string;
    phone: string;
    passportSeries: string;
    pinfl: string;
    dateOfBirth: string;
    address: string;
    region: string;
    passportFront: string;
    passportBack: string;
    aviaCargoId: string | null;
    autoCargoId: string | null;
    registered: boolean;
}

export default function IAboutUser() {
    const router = useRouter();

    const exitHandler = () => {
        router.push('/');
        localStorage.clear();
    };

    const fetchData = useMainFetch({
        key: 'user-data',
        endpoint: '/me',
        generateData: res => res.data.data,
    });

    const userData = fetchData.data as IUserData;

    

    return (
        <Box sx={{ p: { xs: 2, sm: 3, md: 4 }, mx: 'auto' }}>
            <Box display={'flex'} position={'relative'} justifyContent={{ xs: 'center', md: 'space-between' }} alignItems={'center'}>
                <Box
                    display='flex'
                    alignItems='center'
                    flexDirection={{ xs: 'column', md: 'row' }}
                    textAlign={{ xs: 'center', md: 'left' }}
                    mb={3}
                >
                    {/*<Avatar*/}
                    {/*    src='https://images.unsplash.com/photo-1438761681033-6461ffad8d80?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8ZmVtYWxlJTIwcHJvZmlsZXxlbnwwfHwwfHx8MA%3D%3D'*/}
                    {/*    alt='Helen Zhou'*/}
                    {/*    sx={{ width: 80, height: 80, mr: { sm: 2, xs: 0 }, mb: { xs: 1, sm: 0 } }}*/}
                    {/*/>*/}
                    <Box>
                        <Typography variant='h5' fontWeight='bold'>
                            {userData?.name}
                        </Typography>
                        {/*<Typography color='green'>Aktiv</Typography>*/}
                        <Typography color={userData?.registered ? "green" : "red"}>
                            {userData?.registered ? "Aktiv" : "Noaktiv"}
                        </Typography>
                    </Box>
                </Box>
                {/*<Button onClick={exitHandler} variant={'text'} color={"inherit"} sx={{display: 'flex', alignItems: 'center', gap: '5px'}}>*/}
                <Button
                    onClick={exitHandler}
                    variant={'text'}
                    color={'inherit'}
                    sx={{
                        display: 'flex',
                        opacity: '0.7',
                        alignItems: 'center',
                        gap: '5px',
                        position: { xs: 'absolute' },
                        right: '0',
                        top: { xs: '0', md: '18px' },
                    }}
                >
                    <IconExit />
                    <Box display={{ xs: 'none', md: 'inline-block' }}>Chiqish</Box>
                </Button>
            </Box>

            <Divider sx={{ mb: { xs: 0 } }} />
        </Box>
    );
}
