import { useState } from 'react';
import classNames from 'classnames';
import { MenuIcon } from '@heroicons/react/outline';
import { XIcon } from '@heroicons/react/solid';
import AuthHeader from './auth-header';
import NavLink from '../../shared/buttons/nav-link';

export type HeaderPropsType = { isAuthenticated: boolean };

function Header({ isAuthenticated }: HeaderPropsType) {
  const [isHidden, setIsHidden] = useState(true);
  const iconSize = 34;

  return (
    <header data-testid='header' className='sticky top-0 z-50'>
      <nav
        data-testid='header-nav'
        className='flex flex-wrap items-center justify-between bg-teal-800 p-2'
      >
        <NavLink to='/' color='transparent' wrapperClassName='hidden md:block'>
          <p className='text-lg font-bold'>Med Moshaver</p>
        </NavLink>

        <AuthHeader className='mx-2 md:order-last' />

        <div className='flex md:hidden'>
          <div className='flex md:hidden'>
            <button id='hamburger' onClick={() => setIsHidden(isHidden => !isHidden)}>
              <MenuIcon
                width={iconSize}
                height={iconSize}
                className={classNames(
                  'toggle block',
                  { hidden: !isHidden },
                  'rounded-md border-2 border-yellow-400 stroke-current p-1 text-yellow-400'
                )}
              />
              <XIcon
                width={iconSize}
                height={iconSize}
                className={classNames(
                  'toggle block',
                  { hidden: isHidden },
                  'rounded-md border-2 border-yellow-400 stroke-current p-1 text-yellow-400'
                )}
              />
            </button>
          </div>
        </div>

        <div
          className={classNames(
            'toggle',
            { hidden: isHidden },
            'text-bold mt-5 w-full text-right md:mt-0 md:flex md:w-auto',
            'border-t-2 border-blue-900 md:border-none'
          )}
        >
          {links
            .filter(link => !link.auth || isAuthenticated)
            .map(link => (
              <div
                key={link.id}
                className={`
                w-100 block rounded-none border-t-2 border-yellow-400
                px-1 py-1 md:inline-block md:border-none
              `}
              >
                <NavLink to={link.href} textSize='base' color='transparent'>
                  {link.name}
                </NavLink>
              </div>
            ))}
        </div>
      </nav>
    </header>
  );
}

const links = [
  { id: 1, name: 'معرفی سامانه', href: '/', auth: false },
  { id: 2, name: 'کد معرف', href: '/home', auth: true },
  { id: 3, name: 'مالی', href: '/financial', auth: true },
  { id: 4, name: 'شرایط و قوانین', href: '/terms-and-conditions', auth: false }
];

export default Header;
