import Link from 'next/link';
import { useRouter } from 'next/router';
import { FC, useEffect, useRef } from "react";
import { ICON_LIST } from '../components';

interface Header {
  type?: 'one' | 'two';
  socialLinks?: { id: string, website: string, url: string }[];
}

const HeaderComponent: FC<Header> = ({ type, socialLinks }) => {
  const router = useRouter();
  const headerMenuMobile = useRef(null);

  useEffect(() => {
    return () => {
      const body = document.querySelector('body');
      body.classList.remove('menu-open');
    }
  }, []);
  
  return (
    <header className={`header header-${type}`}>
      <Link href="/">
        <a href="" className="header-logo">
          Goñi
        </a>
      </Link>
      <div className="header-menu">
        <a data-slug="work" onClick={() => {
          if (router.route === '/') {
            return;
          }
          window.localStorage.setItem('source', 'from-page');
          router.push('/');
        }}>work</a>
        <Link href="/personal">
          <a href="" className={router.pathname === '/personal' ? 'link-selected' : ''}>personal</a>
        </Link>
        <Link href="/biography">
          <a href="" className={router.pathname === '/biography' ? 'link-selected' : ''}>bio</a>
        </Link>
      </div>
      <div className="header-mobile-menu" ref={headerMenuMobile} onClick={() => {
        const element = headerMenuMobile.current;
        const body = document.querySelector('body');

        if (element.classList.contains('open')) {
          element.classList.add('close');

          setTimeout(() => {
            element.classList.remove('open', 'close');
            body.classList.remove('menu-open');
          }, 251);
          return;
        }

        element.classList.add('open');
        body.classList.add('menu-open');
      }}>
        <span></span>
        <span className="center"></span>
        <span></span>
      </div>
      <div className="header-mobile-menu-list">
        <div>
          <div className="header-mobile-menu-text">
            menu
          </div>
          <div className="header-mobile-menu-links">
            <div>
              <a onClick={() => {
                if (router.route === '/') {
                  return;
                }
                window.localStorage.setItem('source', 'from-page');
                router.push('/');
              }}>work</a>
              <Link href="/personal">
                <a href="">personal</a>
              </Link>
              <Link href="/biography">
                <a href="">bio</a>
              </Link>
              <Link href="/contact">
                <a href="">contact</a>
              </Link>
            </div>
          </div>
          <div className="header-mobile-menu-social-media">
            {socialLinks.length > 0 && <span>follow me</span>}
            <div>
              {socialLinks.length > 0 && socialLinks.map((link, index) => {
                const Icon = ICON_LIST[link.website];

                if(Icon) {
                  return (
                    <a href={link.url} target="_blank" key={index}>
                      <Icon />
                    </a>
                  );
                } 
              })}
            </div>
          </div>
        </div>
      </div>
    </header>
  );
};

HeaderComponent.defaultProps = {
  type: 'one'
};

export default HeaderComponent;