import { memo } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { Button, Typography, type SxProps, type ButtonProps } from '@mui/material';
import { teal } from '@mui/material/colors';

import ImageIcon from '../../Icon/image';
import Logo from '../../Logo';
import { styled, useTheme } from '../../Theme';

export type LinkItem = {
  url: string;
  title: React.ReactNode;
  name: string;
  showBadge?: false | true;
};

// const a: LinkItem = {};

export interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
  images: Record<string, string>;
  links: LinkItem[];
  prefix?: string;
  addons?: React.ReactNode;
  logo?: React.ReactNode;
  sx?: SxProps;
}

export default function Sidebar({
  images,
  links,
  prefix = '/images',
  addons = undefined,
  logo = undefined,
  ...rest
}: SidebarProps) {
  const theme = useTheme();
  const location = useLocation();
  const isSelected = (_: string, name: string) => {
    const pattern = new RegExp(`/${name}`);
    return pattern.test(location.pathname);
  };

  return (
    <MenuItems {...rest}>
      <Link to="/" className="sidebar-logo">
        {logo || <Logo showText={false} size={20} />}
      </Link>
      {links.map(({ url, name, title, showBadge }) => {
        const selected = isSelected(url, name);
        return (
          <MenuItem component={Link} key={url} selected={selected} to={url}>
            <ImageIcon
              name={images[name]}
              size={36}
              color={selected ? '#00c2c4' : theme.typography.color.main}
              prefix={prefix}
              showBadge={showBadge}
            />
            <Typography component="span" className="menu-title">
              {title}
            </Typography>
          </MenuItem>
        );
      })}
      <div style={{ flex: 1 }} />
      {addons}
    </MenuItems>
  );
}

const MenuItems = memo(styled('div')`
  flex: 1;
  display: flex;
  flex-direction: column;

  && .sidebar-logo {
    display: none;
    border-bottom: 1px solid #eee;
    background: ${(props) => props.theme.palette.background.default};
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 10px 0;
    text-align: center;
    font-size: 0;
  }
  ${(props) => props.theme.breakpoints.down('md')} {
    && .sidebar-logo {
      display: block;
    }
  }
`);

const gradient = 'linear-gradient(32deg, rgba(144, 255, 230, 0.1), rgba(144, 255, 230, 0))';

type MenuItemProps = {
  selected: boolean;
};

const MenuItem = styled(Button)<MenuItemProps & ButtonProps<typeof Link, { component: typeof Link }>>`
  && {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    transition: all 200ms ease-in-out;
    background: ${(props) => (props.selected ? gradient : '')};
    padding: 24px 0;
    border-left: 2px solid ${(props) => (props.selected ? teal.A700 : 'transparent')};
    border-radius: 0;

    &:hover {
      background: ${gradient};
      border-left-color: ${teal.A700};
    }

    .menu-title {
      margin-top: 8px;
      font-size: 12px;
      font-weight: 500;
      text-align: center;
      text-transform: capitalize;
      letter-spacing: normal;
      width: 80%;
      color: ${(props) => props.theme.palette.text.primary};
    }
  }
`;
