import * as React from 'react';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';
import Button from '@mui/material/Button';
import Link from 'next/link';
import { Stack } from '@mui/material';
import SignInButton from './account-login-button';
import MobileDrawer from './MobileMenu';
import LogoAndName from './LogoAndName';
import { NavItems } from '@/data/navigation-items';
import { useUserContext } from '@/context/UserContext';
import ProfileMenu from './profile-menu';

const drawerWidth = 280
export default function Navbar() {
  const { userData, session_valid } = useUserContext();
  const [mobileOpen, setMobileOpen] = React.useState(false);

  const handleDrawerToggle = () => {
    setMobileOpen((prevState) => !prevState);
  };

  return (
    <Box sx={{ display: 'flex', position:'sticky' }}>      
      <AppBar
        component='nav'
        sx={{
          position: 'relative',
          backgroundColor: 'transparent',
          backgroundImage: 'initial',
          borderBottom: '1.5px solid rgba(143, 231, 137, 0.1)',
          paddingX: { xs: 2, md: '3%', lg: '7%' },
          paddingY: { xs: '5px', md: '15px' },
        }}
        elevation={0}
      >
        <Toolbar
          sx={{backgroundColor: 'transparent', justifyContent: 'space-between'}}
          disableGutters
        >
          <LogoAndName />

          <Box sx={{ display: { xs: 'none', lg: 'initial' } }}>
            {NavItems.map((item, index) => (
              <Link
                href={item.href}
                key={index}
              >
                <Button sx={{ color: '#000', ml: index === 0 ? '0' : { md: '25px', lg: '20px' } }}>{item.title}</Button>
              </Link>
            ))}
          </Box>

          <Stack 
            direction='row'
            spacing={1}
            alignItems={'center'}
          >
            {userData && session_valid &&
              <ProfileMenu />
            }

            <IconButton
              color="inherit"
              edge="start"
              onClick={handleDrawerToggle}
              sx={{ display: { lg: 'none' } }}
            >
              <MenuIcon />
            </IconButton>

            <Box sx={{ display: { xs: 'none', md: 'initial' }}}>
              <SignInButton />
            </Box>

          </Stack>

          <MobileDrawer
            handleDrawerToggle={handleDrawerToggle}
            navItems={NavItems}
            mobileOpen={mobileOpen}
            drawerWidth={drawerWidth}
          />
        </Toolbar>
      </AppBar>
    </Box>
  );
}