import { Typography } from '@mui/material';
import clsx from 'clsx';
import { styled } from '../../Theme';
import { NavLink } from './external-link';

export type LinkItem = {
  url: string;
  title: React.ReactNode;
  icon?: React.ReactNode;
  iconZoom?: number;
  color?: string;
  showBadge?: false | true;
  external?: false | true;
  active?: boolean;
  children?: LinkItem[];
};

function renderItem(item: LinkItem, index: number) {
  if (item.children?.length) {
    // eslint-disable-next-line no-use-before-define
    return renderGroup(item, index);
  }
  const { url, icon, title, showBadge, external, active } = item;
  // external = true 时 link active 状态由传入 links 的调用方决定 (适用于 blocklet ui dashboard 的情况)
  return (
    <li key={`${url}-${index}`} className="layout-sidebar-item">
      <NavLink
        external={external}
        to={url}
        className={({ isActive }) =>
          clsx('layout-sidebar-link', { 'layout-sidebar-link--active': external ? active : isActive })
        }>
        {icon && <span className={`layout-sidebar-icon ${showBadge ? 'layout-sidebar-badge' : ''}`}>{icon}</span>}
        <Typography component="span" className="layout-sidebar-link-text">
          {title}
        </Typography>
      </NavLink>
    </li>
  );
}

function renderGroup(item: LinkItem, index: number) {
  return (
    <li key={`group-${item.title}-${index}`} className="layout-sidebar-group">
      <span className="layout-sidebar-group-title">{item.title}</span>
      <ul>{item.children!.map(renderItem)}</ul>
    </li>
  );
}

export interface SidebarProps {
  links: LinkItem[];
  addons?: React.ReactNode;
  dense?: false | true;
}

function Sidebar({ links, addons = undefined, dense = false, ...rest }: SidebarProps) {
  return (
    <Root {...rest} className={clsx({ 'layout-sidebar-dense': dense })}>
      <ul>{links.map(renderItem)}</ul>
      <div style={{ flex: 1 }} />
      {addons}
    </Root>
  );
}

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

const Root = styled('div')`
  display: flex;
  flex-direction: column;
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .layout-sidebar-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 22px 24px;
    color: ${(props) => props.theme.palette.text.secondary};
    text-decoration: none;

    &:hover,
    &.layout-sidebar-link--active {
      color: ${(props) => props.theme.palette.primary.main};
      background: ${gradient};
      border-left-color: ${(props) => props.theme.palette.primary.main};
    }
  }
  .layout-sidebar-icon {
    display: inline-block;
    width: 32px;
    height: 32px;
    > img,
    > svg {
      width: 32px;
      height: 32px;
    }
  }
  .layout-sidebar-badge {
    position: relative;
    &:after {
      content: '';
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 10px;
      background-color: #fe4e44;
      right: -2px;
      top: 0;
      box-shadow:
        0px 1px 4px rgba(0, 0, 0, 0.3),
        0px 0px 20px rgba(0, 0, 0, 0.1);
    }
  }
  .layout-sidebar-link-text {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    text-transform: capitalize;
    letter-spacing: normal;
  }
  /* dense=false 时隐藏 group title */
  .layout-sidebar-group-title {
    display: none;
  }
  &.layout-sidebar-dense {
    box-sizing: border-box;
    padding: 20px 0;
    font-weight: bold;
    .layout-sidebar-item {
      padding: 0 16px;
    }
    .layout-sidebar-item + .layout-sidebar-item {
      margin-top: 1px;
    }
    .layout-sidebar-link {
      box-sizing: border-box;
      flex-direction: row;
      align-items: center;
      width: 100%;
      padding: 8px;
      &:hover,
      &.layout-sidebar-link--active {
        color: ${(props) => props.theme.palette.grey[900]};
        background: ${(props) => props.theme.palette.grey[100]};
        border: 0;
        border-radius: 4px;
      }
    }
    .layout-sidebar-icon {
      display: inline-block;
      width: 20px;
      height: 20px;
      margin-right: 8px;
      > img,
      > svg {
        width: 20px;
        height: 20px;
      }
    }
    .layout-sidebar-badge {
      &:after {
        width: 6px;
        height: 6px;
        border-radius: 6px;
        right: -2px;
        top: 0;
      }
    }
    .layout-sidebar-link-text {
      margin-top: 0;
      font-size: 14px;
      line-height: 1;
    }
    .layout-sidebar-group {
      color: ${(props) => {
        return props.theme.palette.text.hint;
      }};
      .layout-sidebar-group-title {
        display: inline-block;
        padding: 8px 0 8px 24px;
        font-size: 13px;
        text-transform: uppercase;
      }
    }
    .layout-sidebar-group + .layout-sidebar-group,
    .layout-sidebar-group + .layout-sidebar-item,
    .layout-sidebar-item + .layout-sidebar-group {
      margin-top: 16px;
    }
  }
`;

export default Sidebar;
