import cc from 'classcat';
import { NavLink, NavLinkProps } from 'react-router-dom';
import { useExactLocation } from '../router/useExactLocation';

import { Box } from 'components/common';

interface SidebarNavLinkProps extends NavLinkProps {
  disabled?: boolean;
  activeClassName?: string;
}

export const SidebarNavLink = ({
  to,
  children,
  disabled,
  className,
  activeClassName = 'c-blue',
  ...props
}: SidebarNavLinkProps) => {
  return (
    <NavLink
      className={({ isActive }) =>
        cc([
          'paddingX3 paddingY4 hover1 bold tdn',
          className,
          { [activeClassName]: isActive, disabled },
        ])
      }
      to={to}
      {...props}
    >
      {children}
    </NavLink>
  );
};

interface SidebarExactNavLinkProps extends NavLinkProps {
  activeClassName?: string;
}

export const SidebarExactNavLink = ({
  to,
  activeClassName = 'c-darkblue bg-grayA01',
  children,
  ...props
}: SidebarExactNavLinkProps) => {
  const isActive = useExactLocation(to);
  return (
    <NavLink
      className={() =>
        cc([
          'flex alignCenter justifyBetween hover1 cup tdn spacing3 paddingX3 fz14',
          { [activeClassName]: isActive },
        ])
      }
      to={to}
      replace
      end
      {...props}
    >
      <div
        className="flexGrow truncate"
        style={{ height: 40, lineHeight: '40px' }}
      >
        {children}
      </div>
    </NavLink>
  );
};

export const SidebarCloseButton = ({
  onClick,
}: {
  onClick?: React.MouseEventHandler;
}) => {
  return (
    <Box
      onClick={onClick}
      className="hover1 cup"
      style={{
        width: 48,
        height: 48,
        fontSize: 24,
        textAlign: 'center',
        verticalAlign: 'center',
        lineHeight: '44px',
      }}
      paddingX={3}
    >
      ×
    </Box>
  );
};

export const Sidebar = ({
  width = 260,
  children,
}: {
  width?: number;
  children: React.ReactNode;
}) => {
  return (
    <div
      className="relative flex flexColumn flexNone overflowAutoY customScroll"
      style={{
        width,
        borderRight: '1px solid var(--borderColor)',
      }}
    >
      {children}
    </div>
  );
};