import { ReactElement, useContext } from 'react';
import {
  Link,
  List,
  ListItem,
  ListItemButton,
  ListItemIcon,
  ListItemText,
  Stack,
} from '@mui/material';

import IconifyIcon from 'components/base/IconifyIcon';
import logo from 'assets/logo/favicon-logo.png';
import Image from 'components/base/Image';

import NavButton from './NavButton';
import { axiosInstance } from '../../../axiosApi.js';
import { useNavigate } from 'react-router-dom';
import { AuthContext } from 'contexts/AuthContext';
import { AccountContext } from 'contexts/AccountContext.js';

import navItems from 'data/nav-items';
import vendorNavItems from 'data/vendor-nav-items.js';
import basicNavItems from 'data/basic-nav-items.js';
import { NavItem } from 'types.js';
import attorneyNavItems from 'data/attorney-nav-items.js';
import publicNavItems from 'data/public-nav-items.js';

const Sidebar = (): ReactElement => {
  const navigate = useNavigate();
  const { authenticated, setAuthentication, setNeedsNewPassword } = useContext(AuthContext);
  const { account, accountLoading } = useContext(AccountContext);

  let nav_items: NavItem[] = [];
  if (account && !accountLoading) {
    if (account.user_type === 'property_owner') {
      if (account.tier === 'premium') {
        nav_items = navItems;
      } else {
        nav_items = basicNavItems;
      }
    } else if (account.user_type === 'vendor') {
      nav_items = vendorNavItems;
    } else if (account.user_type === 'attorney') {
      nav_items = attorneyNavItems;
    }
  } else {
    nav_items = publicNavItems;
  }

  const handleSignOut = async () => {
    try {
      const response = await axiosInstance.post('/logout/', {
        refresh_token: localStorage.getItem('refresh_token'),
      });
      localStorage.removeItem('access_token');
      localStorage.removeItem('refresh_token');
      axiosInstance.defaults.headers['Authorization'] = null;
      setAuthentication(false);
    } finally {
      navigate('/authentication/login/');
    }
  };
  return (
    <Stack
      justifyContent="space-between"
      bgcolor="background.paper"
      height={1}
      boxShadow={(theme) => theme.shadows[4]}
      sx={{
        overflow: 'hidden',
        margin: { xs: 0, lg: 3.75 },
        borderRadius: { xs: 0, lg: 5 },
        '&:hover': {
          overflowY: 'auto',
        },
        width: 218,
      }}
    >
      <Link
        href="/"
        sx={{
          position: 'fixed',
          zIndex: 5,
          mt: 6.25,
          mx: 4.0625,
          mb: 3.75,
          bgcolor: 'background.paper',
          borderRadius: 5,
        }}
      >
        <Image src={logo} width={1} />
      </Link>
      <Stack
        justifyContent="space-between"
        mt={16.25}
        height={1}
        sx={{
          overflow: 'hidden',
          '&:hover': {
            overflowY: 'auto',
          },
          width: 218,
        }}
      >
        <List
          sx={{
            mx: 2.5,
            py: 1.25,
            flex: '1 1 auto',
            width: 178,
          }}
        >
          {nav_items.map((navItem, index) => (
            <NavButton key={index} navItem={navItem} Link={Link} />
          ))}
        </List>
        <List
          sx={{
            mx: 2.5,
          }}
        >
          <ListItem
            sx={{
              mx: 0,
              my: 2.5,
            }}
          >
            <ListItemButton
              LinkComponent={Link}
              href="/"
              sx={{
                backgroundColor: 'background.default',
                color: 'common.white',
                '&:hover': {
                  backgroundColor: 'primary.main',
                  color: 'common.white',
                  opacity: 1.5,
                },
              }}
            >
              <ListItemIcon>
                <IconifyIcon icon="ri:logout-circle-line" />
              </ListItemIcon>
              <ListItemText onClick={handleSignOut}>Log out</ListItemText>
            </ListItemButton>
          </ListItem>
        </List>
      </Stack>
    </Stack>
  );
};

export default Sidebar;