import * as React from 'react';
import { useRef } from 'react';
import { NavLink } from 'react-router-dom';
import { useClickOutside } from '@devesharp/react-hooks';
import { faChevronDown } from '@fortawesome/free-solid-svg-icons/faChevronDown';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { UserAvatar } from '../UserAvatar';
import { PHeader, PHeaderChild } from './header.interface';

const HeaderDesktopUserMenu: React.FunctionComponent<PHeaderChild> = (props) => {
   const ref = useRef();
   useClickOutside(props.closeUserMenuInfo, ref);

   return (
      <>
         <div className="container-user" onClick={props.toggleUserMenuInfo} onBlur={props.closeUserMenuInfo} ref={ref}>
            <div className="username-container">
               <div className="user-image-container">
                  <UserAvatar user={props.user} size="s" />
               </div>
               Olá, <span className="username">{props.user.name}</span>{' '}
               <FontAwesomeIcon icon={faChevronDown} flip="horizontal" />
               <div className={`username-container-popup ${!props.openUserMenuInfo || 'opened'}`}>
                  {/* User info */}
                  <div className="ds-table" onClick={props.closeUserMenuInfo}>
                     <div className="ds-cell">
                        <UserAvatar user={props.user} size="m" />
                     </div>
                     <div className="ds-cell pl-2">
                        <div className="name">{props.user.name}</div>
                        <div className="role">Usuário</div>
                     </div>
                  </div>
                  {/* User info */}

                  {/* DropMenu User */}
                  <div className="ds-menu">
                     {!!props.menuUserBar &&
                        props.menuUserBar.map((item, i) => (
                           <NavLink key={item.route} className="ds-item" to={{ pathname: item.route }} exact>
                              {item.title}
                           </NavLink>
                        ))}
                  </div>
                  {/* DropMenu User */}
               </div>
            </div>
         </div>
      </>
   );
};

export default HeaderDesktopUserMenu;
