import * as React from 'react';
import { NavLink } from 'react-router-dom';
import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import AnimateHeight from 'react-animate-height';
import { PHeader, SHeader } from './HeaderVertical.interface';
import * as S from './HeaderVertical.style';
import {useState} from "react";
import {UserAvatar} from "../UserAvatar";

/**
 * Component Header
 * @param props
 * @constructor
 */
export const HeaderVertical: 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,
   };
   
   const [subMenuOpen, setSubMenuOpen] = useState(-1);

   
   return (<S.Container open={menuMobile}>
      <div className="logo-container">
         <div className="d-flex align-items-center">
            <div className="menu-icon">
               <div className={`ds-menu-hamburger ${menuMobile ? 'open' : ''}`} onClick={toggleMenuMobile}>
                  <span />
                  <span />
                  <span />
               </div>
            </div>
            <div className={'flex-fill'}>
               {!!props.homeLink && (
                  <NavLink to={{ pathname: props.homeLink }} exact>
                     <div className="ds-logo">
                        <img src={props.logo} alt="" />
                     </div>
                  </NavLink>
               )}

               {!props.homeLink && (
                  <div className="ds-logo">
                     <img src={props.logo} alt="" />
                  </div>
               )}
            </div>
            <div className={'actions-container'}>
               {props.actionsElements}
            </div>
         </div>
      </div>
      
      <div className="menu-container">
         <hr className={'division-menu-top'}/>
         {props.menu.map((item: any, i): any => (
            <span key={`${item.route}-${i}`}>
               {item == 'division' && <hr />}
               {!item?.subMenu && item != 'division'  && <Menu {...item} />}
               {!!item?.subMenu && <SubMenu {...item} open={subMenuOpen == i} openSubmenu={() => setSubMenuOpen(i)} closeSubmenu={() => setSubMenuOpen(-1)}/>}
         </span>
         ))}
      </div>
   </S.Container>);
};

const Menu: React.FunctionComponent<any> = (props) => {

   if (!!props.titleCategory) {
      return <div className="title-category">{props.title}</div>
   }
   
   return (
      <NavLink className="menu-item" activeClassName="active" to={{ pathname: props.route }} exact>
         <div className="title">{props.title}</div>
      </NavLink>
   );
};

const SubMenu: React.FunctionComponent<any> = (props) => {
   const isSubRoute = (location, subMenu: any): boolean => {
      return !subMenu.every((item) => item.route !== location.pathname);
   };

   
   return (
      <div className={`menu-category ${!props.open || 'open'}`}>
         <NavLink
            key={props.route}
            className={`menu-item ${!props.open || 'open'}`}
            activeClassName="menu-item-active"
            to={{
               pathname: props.route,
            }}
            onClick={(e) => {
               e.preventDefault();
               if(props.open) {
                  props.closeSubmenu();   
               }else {
                  props.openSubmenu();
               }
               
            }}
            isActive={(match, location) => isSubRoute(location, props.subMenu)}
         >
            <div className="title">{props.title}</div>
            <div className="caret"><FontAwesomeIcon icon={faChevronDown} flip="horizontal" /></div>
         </NavLink>

         <AnimateHeight
            id='example-panel'
            duration={ 500 }
            height={ props.open ? 'auto' : 0 }
         >
         <div className="menu-subcategory">
            {props.subMenu.map((subItem, i): any => (
               <NavLink
                  key={subItem.route}
                  className="item"
                  activeClassName="active"
                  to={{
                     pathname: subItem.route,
                  }}
                  exact
               >
                  {subItem.title}
               </NavLink>
            ))}
         </div>
         </AnimateHeight>
      </div>
   );
};