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';
import Button from '../../shared/buttons/button';
import { DEFAULT_DECKS_ROUTE } from '../../utils/index';

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

  return (
    <header className='sticky top-0 z-50'>
      <nav className='flex flex-wrap items-center justify-between bg-gray-800 p-2'>
        <NavLink to='/' color='transparent' wrapperClassName='hidden md:block'>
          <span className='text-lg font-bold'>Med Moshaver</span>
        </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-blue-500 stroke-current p-1 text-blue-500'
                )}
              />
              <XIcon
                width={iconSize}
                height={iconSize}
                className={classNames(
                  'toggle block',
                  { hidden: isHidden },
                  'rounded-md border-2 border-blue-500 stroke-current p-1 text-blue-500'
                )}
              />
            </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.map(link => (
            <div
              key={link.id}
              className='w-100 block rounded-none border-t-2 border-blue-500 py-1 md:inline-block md:border-none'
            >
              <NavLink to={link.href} textSize='base' color='transparent' className='w-100 mx-auto'>
                {link.name}
              </NavLink>
            </div>
          ))}
          <div className='w-100 block rounded-none border-t-2 border-blue-500 py-1 md:inline-block md:border-none'>
            <a href={process.env.REACT_APP_INTRODUCER_BASE_URL} target='_blank' rel='noreferrer'>
              <Button
                textSize='base'
                color='transparent'
                className='w-100 mx-auto'
                content='معرفی به دوستان'
              />
            </a>
          </div>
        </div>
      </nav>
    </header>
  );
}

const links = [
  { id: 1, name: 'خانه', href: '/' },
  { id: 2, name: 'بسته‌ها', href: DEFAULT_DECKS_ROUTE },
  { id: 3, name: 'فروشگاه', href: '/store' },
  { id: 4, name: 'رتبه بندی', href: '/ranking' },
  { id: 5, name: 'نمودار', href: '/charts/weekly' }
];

export default Header;
