import type { FC, ReactNode } from 'react';
import { NavLink as RouterLink } from 'react-router-dom';

import Box from '@material-hu/mui/Box';
import ListItem, { ListItemProps } from '@material-hu/mui/ListItem';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import Button from '@material-hu/components/design-system/Buttons/Button';

export type NavItemProps = ListItemProps & {
  active?: boolean;
  icon?: ReactNode;
  info?: ReactNode;
  path?: string;
  title: string;
  onClick?: () => void;
  isSubMenu?: boolean;
  isNested?: boolean;
  unreadCount?: boolean;
};

const NavItem: FC<NavItemProps> = props => {
  const {
    active = false,
    icon,
    info,
    path,
    title,
    onClick,
    isSubMenu = false,
    isNested,
  } = props;
  const { palette } = useTheme();

  return (
    <ListItem
      disableGutters
      sx={{
        display: 'flex',
        py: 0,
        mb: isSubMenu || isNested ? 0 : 1,
        pl: isNested ? 2 : 0,
      }}
    >
      <Button
        {...(path ? { component: RouterLink, to: path } : {})}
        startIcon={icon}
        onClick={onClick}
        sx={{
          color: 'text.secondary',
          fontWeight: 'fontWeightMedium',
          justifyContent: 'flex-start',
          textAlign: 'left',
          display: 'flex',
          alignItems: 'center',
          px: 2,
          py: '10px',
          borderRadius: '8px',
          textTransform: 'none',
          width: '100%',
          ...(active && {
            color: palette.new.text.neutral.brand,
            fontWeight: 'fontWeightBold',
            '& svg': {
              color: palette.new.text.neutral.brand,
            },
          }),
          ':hover': {
            backgroundColor: palette.new.background.elements.grey,
          },
        }}
        variant="text"
      >
        <Box
          title={title}
          sx={{
            width: '100%',
            display: '-webkit-box',
            overflow: 'hidden',
            WebkitBoxOrient: 'vertical',
            WebkitLineClamp: 2,
            flexGrow: 1,
          }}
        >
          <Typography
            component="span"
            sx={{
              color: active
                ? palette.new.text.neutral.brand
                : palette.new.text.neutral.lighter,
              fontFamily: 'Roboto',
              fontWeight: 500,
              fontSize: isSubMenu ? '12px' : '14px',
              lineHeight: '24px',
              letterSpacing: '0.4px',
            }}
          >
            {title}
          </Typography>
        </Box>
        {info}
      </Button>
    </ListItem>
  );
};

export default NavItem;