import * as React from 'react';
import HeaderDesktopMenuBar from './header--deskop-menu-bar';
import HeaderDesktopTop from './header--deskop-top';
import HeaderMobile from './header-mobile';
import { PHeader, SHeader } from './header.interface';
import Style from './header.style';

/**
 * Component Header
 * @param props
 * @constructor
 */
export const Header: React.FunctionComponent<PHeader> = (props) => {
   // eslint-disable-next-line no-underscore-dangle
   const [menuMobile, setMenuMobile] = React.useState(!!(props as any).__menuMobileOpen);
   // eslint-disable-next-line no-underscore-dangle
   const [openUserMenuInfo, setOpenUserMenuInfo] = React.useState(!!(props as any).__openUserMenuInfo);

   //
   const toggleMenuMobile = (): any => setMenuMobile(!menuMobile);
   const closeUserMenuInfo = (): any => setOpenUserMenuInfo(false);
   const toggleUserMenuInfo = (): any => setOpenUserMenuInfo(!openUserMenuInfo);

   //
   const sharedProps = {
      ...props,
      menuMobile,
      openUserMenuInfo,
      toggleMenuMobile,
      closeUserMenuInfo,
      toggleUserMenuInfo,
   };

   return (
      <Style>
         <div className="ds-header-mobile-space" />
         <div className={`ds-header ${menuMobile ? 'ds-menu-mobile-opened' : ''}`}>
            <HeaderDesktopTop {...sharedProps} />
            <HeaderDesktopMenuBar {...props} />
            <HeaderMobile {...sharedProps} />
         </div>
      </Style>
   );
};
//
// Header.defaultProps = {
//    menuUserBar: [
//       {
//          title: 'Meu Perfil',
//          route: '/settings/accounts',
//       },
//       {
//          title: 'Sair',
//          route: '/logout',
//       },
//    ],
// };
