import React, { useState } from 'react';
import { Hamburger } from 'app/modules/navigation/components/hamburger/hamburger';
import cx from 'classnames';
import { SideNav } from './sideNav';

const SideMenu = () => {
  const [ menuToggle, setMenuToggle ] = useState(false);
  const headerContainerClassName = cx('o-aside-layout__burger', 'u-display-md--none', 'u-cursor--pointer', 'js-hit-area',
    { 'u-display--none': menuToggle });
  const sideBurgerContainerClassName = cx('c-side-nav__burger', 'u-cursor--pointer', 'js-hit-area', { 'u-display--none': !menuToggle });
  const hamburger = <Hamburger open={menuToggle} closeDarkTheme />;

  return <>
    <div className={headerContainerClassName} onClick={() => setMenuToggle(!menuToggle)}>
      {hamburger}
    </div>
    <aside className={cx('o-aside-layout__sidebar', { 'o-aside-layout__sidebar--show': menuToggle })}>
      <SideNav onClickItemOut={() => setMenuToggle(false)}>
        <div className={sideBurgerContainerClassName} onClick={() => setMenuToggle(!menuToggle)}>
          {hamburger}
        </div>
      </SideNav>
    </aside>
  </>;
};
export { SideMenu };