/* eslint-disable jsx-a11y/anchor-is-valid */
import React, { FunctionComponent, useContext } from 'react';
import { AiOutlineMenu } from 'react-icons/ai';
import cn from 'classnames';

import { StyledIconButton, StyledLightBackgroundWrapper } from '../StyledComponents';

import { Context } from '../context';
import { useTheme } from '../Theme';
import { SidebarDivider, SideBarAccordGroup, SideBarMenu } from './components';
import { SidebarProps } from './types.d';

const SquareSidebar: FunctionComponent<SidebarProps> = ({
  children,
  hideLogo = false,
  logo = { light: () => null, dark: () => null, onClick: () => {} },
  minimized = false,
}) => {
  const { isSideBarVisible, toggleSideBarVisibility, logo: navbarLogo } = useContext(Context);
  const theme = useTheme();

  const classNames = cn({
    sidebar: true,
    'js-sidebar': true,
    visible: isSideBarVisible,
    minimized,
  });
  // use logo from navbar or from props
  const logoObj = logo.light() !== null ? logo : navbarLogo;

  const renderSideBarTop = () => {
    // if (minimized) return null;
    return (
      <div className="sidebar__top">
        <button className="sidebar__close js-sidebar-close" type="button" onClick={() => toggleSideBarVisibility()}>
          <StyledIconButton $theme={theme} className="icon icon-burger">
            <AiOutlineMenu size={20} />
          </StyledIconButton>
        </button>
        {!hideLogo && (
          <a className="sidebar__logo" onClick={logoObj.onClick} role="presentation">
            <div className="sidebar__pic sidebar__pic_black">{logoObj.dark ? logoObj.dark() : null}</div>
            <div className="sidebar__pic sidebar__pic_white">{logoObj.light()}</div>
          </a>
        )}
      </div>
    );
  };

  return (
    <StyledLightBackgroundWrapper $theme={theme} className={classNames}>
      {renderSideBarTop()}
      <div className="sidebar__wrapper">{children}</div>
    </StyledLightBackgroundWrapper>
  );
};

export const Sidebar = Object.assign(SquareSidebar, {
  AccordionGroup: SideBarAccordGroup,
  Divider: SidebarDivider,
  Menu: SideBarMenu,
});
