import React, { FC, useState } from 'react';

import { HamburgerMenuIcon } from '../../../icons/HamburgerMenuIcon';
import ProperLogo from '../../../icons/ProperLogo';
import { TopNavBody, TopNavLeftContent, TopNavRightContent } from '../styles';
import {
  navMobileMenuButtonIconStyles,
  StyledCloseIcon,
  ToggleNavMobileMenuButton,
  TopNavMobileContainer,
  TopNavMobileMenu,
  TopNavMobileMenuContent,
  TopNavMobileMenuFooter,
} from './styles';
import { ITopNavMobileProps } from './types';

export const TopNavMobile: FC<ITopNavMobileProps> = ({
  menuItems,
  aboveMenuItems,
  belowMenuItems,
}) => {
  const [isCollapsed, setIsCollapsed] = useState<boolean>(false);

  return (
    <TopNavMobileContainer isCollapsed={isCollapsed}>
      <TopNavBody>
        <TopNavLeftContent>
          <ProperLogo width={80} color={'#3A5DAE'} />
        </TopNavLeftContent>

        <TopNavRightContent>
          {aboveMenuItems}

          <ToggleNavMobileMenuButton
            isCollapsed={isCollapsed}
            onClick={setIsCollapsed.bind(null, !isCollapsed)}
          >
            {!isCollapsed ? (
              <HamburgerMenuIcon css={navMobileMenuButtonIconStyles} />
            ) : (
              <StyledCloseIcon />
            )}
          </ToggleNavMobileMenuButton>
        </TopNavRightContent>
      </TopNavBody>

      <TopNavMobileMenu isCollapsed={isCollapsed}>
        <TopNavMobileMenuContent>{menuItems}</TopNavMobileMenuContent>

        <TopNavMobileMenuFooter>{belowMenuItems}</TopNavMobileMenuFooter>
      </TopNavMobileMenu>
    </TopNavMobileContainer>
  );
};