'use client';

import React from 'react';
import Link from 'next/link';
import Chip from '@mui/material/Chip';
import List from '@mui/material/List';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import { Theme } from '@mui/material/styles';
import Typography from '@mui/material/Typography';
import useMediaQuery from '@mui/material/useMediaQuery';
import { styled, useTheme } from '@mui/material/styles';
import { MenuItemType } from '../types/sidebar';

interface NavItemProps {
  item: MenuItemType;
  onClick: (event: React.MouseEvent<HTMLElement>) => void;
  hideMenu?: boolean | string;
  level?: number;
  pathDirect: string;
}

interface StyledListItemButtonProps {
  active?: boolean;
  level?: number;
  hideMenu?: boolean | string;
}

const StyledListItemButton = styled(ListItemButton, {
  shouldForwardProp: (prop) =>
    prop !== 'active' && prop !== 'level' && prop !== 'hideMenu',
})<StyledListItemButtonProps>(({ theme, active, level = 1, hideMenu }) => ({
  whiteSpace: 'nowrap',
  marginBottom: '2px',
  padding: '8px 10px',
  borderRadius: '7px',
  backgroundColor: level > 1 ? 'transparent !important' : 'inherit',
  color:
    active && level > 1
      ? `${theme.palette.primary.main}!important`
      : theme.palette.text.secondary,
  paddingLeft: hideMenu ? '10px' : level > 2 ? `${level * 15}px` : '10px',
  '&:hover': {
    backgroundColor: theme.palette.primary.light,
    color: theme.palette.primary.main,
  },
  ...(active && {
    color: theme.palette.primary.main,
    backgroundColor: theme.palette.primary.light,
    '&:hover': {
      backgroundColor: theme.palette.primary.light,
      color: theme.palette.primary.main,
    },
  }),
}));

interface StyledListItemIconProps {
  active?: boolean;
  level?: number;
}

const StyledListItemIcon = styled(ListItemIcon, {
  shouldForwardProp: (prop) => prop !== 'active' && prop !== 'level',
})<StyledListItemIconProps>(({ theme, active, level = 1 }) => ({
  minWidth: '36px',
  padding: '3px 0',
  color:
    active && level > 1 ? `${theme.palette.primary.main}!important` : 'inherit',
}));

export default function NavItem({
  item,
  level = 1,
  pathDirect,
  hideMenu,
  onClick,
}: NavItemProps) {
  const lgDown = useMediaQuery((theme: Theme) => theme.breakpoints.down('lg'));
  const Icon = item?.icon as React.ComponentType<any>;
  const itemIcon = Icon ? <Icon /> : null;
  const isActive = pathDirect === item?.href || pathDirect === item?.path;

  return (
    <List component="li" disablePadding key={item?.id && item.title}>
      <Link href={item.href || '#'} style={{ textDecoration: 'none' }}>
        <StyledListItemButton
          disabled={item?.disabled}
          selected={isActive}
          active={isActive}
          level={level}
          hideMenu={hideMenu}
          onClick={lgDown ? onClick : undefined}
        >
          <StyledListItemIcon active={isActive} level={level}>
            {itemIcon}
          </StyledListItemIcon>
          <ListItemText>
            {hideMenu ? '' : <>{item?.title}</>}
            <br />
            {item?.subtitle ? (
              <Typography variant="caption">
                {hideMenu ? '' : item?.subtitle}
              </Typography>
            ) : (
              ''
            )}
          </ListItemText>

          {!item?.chip || hideMenu ? null : (
            <Chip
              color={item?.chipColor as any}
              variant={item?.variant ? (item?.variant as any) : 'filled'}
              size="small"
              label={item?.chip}
            />
          )}
        </StyledListItemButton>
      </Link>
    </List>
  );
}
