import Box from '@mui/material/Box';
import Image from 'next/image';
import Link from 'next/link';
import { CART_PAGE, PROFILE_PAGE } from '../../../constants/pages';
import { NavItemDesktop } from './NavItem';
import { items } from './navItems';

const DesktopNav = ({ router, totalQuantity, session, signOutHandler }) => {
  return (
    <Box sx={{ display: { xs: 'none', md: 'flex' }, width: '100%' }}>
      <Box
        sx={{
          flexGrow: 1,
          maxWidth: '50%',
          height: 30,
          display: 'flex',
          justifyContent: 'center',
        }}
      >
        {items.map((item, i) => (
          <NavItemDesktop
            key={item.id}
            router={router}
            name={item.name}
            url={item.url}
          />
        ))}
      </Box>
      <Box
        sx={{
          flexGrow: 1,
          maxWidth: '50%',
          height: 30,
          display: 'flex',
          justifyContent: 'right',
          pt: 0.5,
          mr: 4,
        }}
      >
        {session?.user?._id && (
          <Box
            sx={{
              mx: 2,
              mt: 0.1,
              cursor: 'pointer',
            }}
            onClick={signOutHandler}
          >
            <Image
              src="/images/logout.svg"
              alt="profile"
              width={18}
              height={20}
            />
          </Box>
        )}
        <Box
          sx={{
            mx: 2,
            cursor: 'pointer',
          }}
        >
          <Link key="home" href={PROFILE_PAGE}>
            <Image
              src="/images/profile.svg"
              alt="profile"
              width={24}
              height={24}
            />
          </Link>
        </Box>
        <Box
          sx={{
            mr: 6,
            ml: 2,
            cursor: 'pointer',
          }}
        >
          <Link key="home" href={CART_PAGE}>
            <Box>
              {totalQuantity !== 0 && (
                <Box
                  sx={{
                    color: 'white',
                    zIndex: 3,
                    width: 20,
                    height: 20,
                    borderRadius: 20,
                    textAlign: 'center',
                    px: 0.5,
                    ml: 2.2,
                    mt: -1,
                    fontSize: 17,
                    position: 'absolute',
                    backgroundColor: 'primary.main',
                  }}
                >
                  {totalQuantity}
                </Box>
              )}
              <Image src="/images/cart.svg" alt="cart" width={24} height={24} />
            </Box>
          </Link>
        </Box>
      </Box>
    </Box>
  );
};

export default DesktopNav;