import React, { useLayoutEffect, useRef, useState } from 'react';
import { useSelector } from 'react-redux';
import { NavLink } from 'react-router-dom';
import { isSurveyActive } from 'app/modules/survey/store/survey.selectors';
import { TopNavTabList } from './topNavTabList';
import { ROUTER, userPanelRoute } from 'app/common/routes';
import { ProfilePopUp } from 'app/modules/navigation/components/profilePopUp';
import { ContrastButton } from 'app/shared/components/contrastButton/contrastButton';
import { SurveyPopup } from 'app/shared/components/topBar/surveyPopup';
import cx from 'classnames';
import { selectUserPools } from 'app/modules/user/store/user.selectors';
import { selectUpdateNotifications } from 'app/modules/notifications/store/updateNotification/updateNotifications.selectors';

interface Props {
  section?: string;
  withoutNavItems?: boolean;
  additionalRouteParams?: {
    [key: string]: string;
  }
}

const TopNavigation = ({ section, withoutNavItems, additionalRouteParams }: Props) => {
  const surveyActive = useSelector(isSurveyActive);
  const [ isSurveyVisible, setSurveyVisibility ] = useState(false);
  const [ isShadowVisible, setShadowVisibility ] = useState(false);
  const userPools = useSelector(selectUserPools);
  const updateNotifications = useSelector(selectUpdateNotifications);
  const topNavRef = useRef<HTMLDivElement>(null);


  const Logo =
      <NavLink to={ROUTER.generate(userPanelRoute)}>
        <img
          className={
            'c-top-navigation__logo u-display--none u-display-lg--flex'}
          src={'/assets/images/logo-id-dark.svg'}
          alt={'Maersk'}
        />
        <img
          className={
            'c-top-navigation__logo u-display-lg--none'}
          src={'/assets/images/logo-mobile-top-navigation.svg'}
          alt={'Maersk'}
        />
      </NavLink>;

  const handleScroll = () => {
    if (topNavRef) {
      if (window.scrollY === 0) {
        setShadowVisibility(false);
      } else if (window.scrollY > 0) {
        setShadowVisibility(true);
      }
    }
  };

  useLayoutEffect(() => {
    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, [ topNavRef ]);

  return (
    <nav
      className={
        cx('c-top-navigation o-layout u-flex-no-wrap u-justify-content-between' +
          ' u-align-items-start u-align-items-md-center',
        { 'u-shadow-box': isShadowVisible })}
      ref={topNavRef}
      onScroll={handleScroll}
    >
      {Logo}
      {!withoutNavItems && <TopNavTabList
        userPools={userPools}
        updateNotifications={updateNotifications}
        section={section}
        additionalRouteParams={additionalRouteParams}
      />}
      <div className='o-layout'>
        { surveyActive &&
        <div className="u-position--relative u-display--none u-display-md--flex">
          {
            !isSurveyVisible ?
              <ContrastButton
                floating
                extraClass="u-margin-right u-margin-xl-right--big"
                onClick={() => setSurveyVisibility(true)}
              >
                <i className="c-top-bar__survey-star-icon icon-star u-margin-right--small" />
                Rate InSite digital
              </ContrastButton>
              :
              <ContrastButton circle
                extraClass="u-margin-right u-margin-right-xl--big"
                onClick={() => setSurveyVisibility(false)}>
                <i className="icon-close-hamburger" />
              </ContrastButton>
          }
          <SurveyPopup isVisible={isSurveyVisible} />
        </div>
        }
        <ProfilePopUp />
      </div>
    </nav>

  );
};

export { TopNavigation };