import LogoSvg from '@/components/common/LogoSvg';
import NextLink from '@/components/common/NextLink';
import { routes } from '@/components/layout/dashboard-layout/routes';
import { useAuthContext } from '@/context/auth-context';
import { pageLinks } from '@/helpers/constants';
import { useMyTranslation } from '@/hooks/useMyTranslation';
import { Box, IconButton, Skeleton, Stack, Tooltip, Typography, styled } from '@mui/material';
import React from 'react';

const StyledBox = styled(Box)`
    height: 100%;
    background: #3489e4;
    display: flex;
    flex-direction: column;
    padding-bottom: 20px;

    .logo {
        padding: 23px 40px;

        h2 {
            color: #fff;
            font-size: 32px;
            font-style: normal;
            font-weight: 700;
            line-height: 36px;
            letter-spacing: 1.92px;
        }
    }

    .nav {
        padding: 60px 0 20px;
        flex-grow: 1;
        height: 100%;
        overflow: auto;
    }

    .nav-item {
        display: flex;
        gap: 12px;
        padding: 12px 38px;
        color: #fff;
        white-space: nowrap;
        transition:
            font-weight 0.3s ease,
            background-color 0.12s ease,
            color 0.12s ease;

        &:hover {
            background-color: #ebf3fc;
            color: #3489e4;
        }

        &.active-navlink {
            background-color: #ebf3fc;
            color: #3489e4;
            font-weight: 700;
        }

        svg {
            width: 24px;
            height: 24px;
        }
    }

    .bottom-nav {
        width: 100%;
        justify-content: center;
        align-items: center;
        margin-top: auto;

        gap: 16px;
    }

    .bottom-nav-img {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        overflow: hidden;
        display: block;
    }

    .bottom-nav-text {
        color: #fff;
        text-align: center;
        font-size: 18px;
        font-style: normal;
        font-weight: 600;
        line-height: 20px; /* 111.111% */
        letter-spacing: 1.44px;
    }

    .bottom-nav-btn {
        width: 48px;
        height: 48px;
        padding: 12px;
        border-radius: 8px;
        color: #fff;
        border: 1px solid #fff;
    }
`;

type Props = {};

const Sidebar = (props: Props) => {
    const t = useMyTranslation();
    const { user, isLoading, logout } = useAuthContext();

    const onLogout = () => {
        if (window.confirm('Do you really want to log out?')) {
            logout();
        }
    };

    const access_routes = routes.filter(route => {
        const haveAccess = route.roles.includes(user?.role!);
        return haveAccess;
    });

    return (
        <StyledBox>
            <Box className='logo'>
                <Typography component='h2'>
                    <NextLink href={pageLinks.home}>
                        <LogoSvg />
                    </NextLink>
                </Typography>
            </Box>

            <Stack className='nav' spacing={0} component='ul'>
                {/* {isLoading
                    ? [1, 2, 3].map((_, index) => (
                          <NextLink className='nav-item' href={'#'} key={index}>
                              <Skeleton
                                  sx={{
                                      backgroundColor: '#fff',
                                      width: 'calc(100% + 40px)',
                                      height: '50px',
                                      marginLeft: '-20px',
                                      marginRight: '-20px',
                                  }}
                              />
                          </NextLink>
                      ))
                    : []} */}
                {access_routes.map((route, index) => {
                    return (
                        <NextLink className='nav-item' href={route.path} key={index}>
                            {route.icon}
                            <span>{t(route.title)}</span>
                        </NextLink>
                    );
                })}
            </Stack>

            <Stack className='bottom-nav'>
                <Tooltip title={t('log_out')}>
                    <IconButton className='bottom-nav-btn' onClick={onLogout}>
                        <svg xmlns='http://www.w3.org/2000/svg' width='22' height='20' viewBox='0 0 22 20' fill='none'>
                            <path
                                d='M10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0C13.2713 0 16.1757 1.57078 18.0002 3.99923L15.2909 3.99931C13.8807 2.75499 12.0285 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18C12.029 18 13.8816 17.2446 15.2919 15.9998H18.0009C16.1765 18.4288 13.2717 20 10 20ZM17 14V11H9V9H17V6L22 10L17 14Z'
                                fill='currentColor'
                            />
                        </svg>
                    </IconButton>
                </Tooltip>
            </Stack>
        </StyledBox>
    );
};

export default Sidebar;
