import { ActionNavItem } from 'app/modules/navigation/components/nav/actionNavItem';
import { NavItem } from 'app/modules/navigation/components/nav/navItem';
import { PopUp } from 'app/shared/components/popUp/popUp';
import { Thumbnail } from 'app/shared/components/thumbnail/thumbnail';
import { accountSettingsRoute, ROUTER } from 'app/common/routes';
import React, { useState } from 'react';
import { useSelector } from 'react-redux';
import { ProfileInfo } from 'app/modules/navigation/components/profileInfo';
import { selectUserAvatar } from 'app/modules/user/store/user.selectors';

export const ProfilePopUp = () => {
  const avatar = useSelector(selectUserAvatar);
  const [ active, setActive ] = useState(false);

  return (
    <div
      className=
        "c-profile-pop-up u-margin-right u-margin-xl-right--big u-display--none u-display-md--flex"
      onMouseOver={() => setActive(true)}
      onMouseOut={() => setActive(false)}
    >
      <div className="c-profile-pop-up__trigger">
        <span className='c-profile-pop-up__button'>
          <Thumbnail hoverOpacity size={'size-small'} src={avatar} />
        </span>
      </div>
      <PopUp active={active} position='right' topMargin>
        <div className="o-gutter-bottom">
          <div className="o-gutter--medium o-gutter-bottom--big">
            <ProfileInfo />
          </div>
          <hr className="hr hr--color-neutral u-margin--none o-gutter-bottom"/>
          <NavItem url={ROUTER.generate(accountSettingsRoute)}
            title="Account settings" icon="icon-system-alternate" isLight />
          <ActionNavItem title="Log out" icon="icon-door-arrow-right" isLight/>
        </div>
      </PopUp>
    </div>
  );
};