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

import Easyblue from '../../assets/img/logo.svg';
import Umbrella from '../../assets/img/icons/umbrella.svg';
import { CallMeButton, LinkHeader, MyAccountLink } from '../../styles/components/shared/ButtonHeader.style';
import { Link, Router } from '../../i18n';
import { HeaderData } from '../../typings/entities';
import Menu from './Menu';
import { HeaderContainer } from '../../styles/components/shared/Header.style';

export const Header: React.FC<HeaderData> = (props) => {
  const {
    header_faq_link,
    header_account_link,
    header_account_label,
    header_matching_link,
    header_matching_label,
    first_product,
    second_product,
    third_product,
    fourth_product,
    fifth_product,
    sixth_product
  } = props;
  const [fixed, setFixed] = useState<boolean>(false);
  const products = [first_product, second_product, third_product, fourth_product, fifth_product, sixth_product];

  function onScroll(): void {
    const scrollY = window.scrollY;
    setFixed(scrollY > 20);
  }

  function renderButtons(): React.ReactElement {
    return (
      <div>
        <CallMeButton
          title="Rappelez-moi"
          id="easyblue-phone-bot"
          href="mailto:support@easyblue.io"
          onClick={event => {
            if ((window as any).Intercom && !!document.querySelector('#intercom-frame')) {
              event.preventDefault();
            }
          }}>
          <i className="fas fa-phone-alt" />
        </CallMeButton>
        <MyAccountLink
          href={header_account_link?.url || '/'}
          title={header_account_label}>
          <span>{header_account_label}</span>
          <i className="fas fa-user" />
        </MyAccountLink>
        <Link href={header_matching_link?.url || '/'} passHref prefetch={false}>
          <LinkHeader><span>{header_matching_label}</span> <Umbrella /></LinkHeader>
        </Link>
      </div>
    );
  }

  useEffect(() => {
    window.addEventListener('scroll', onScroll);
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <HeaderContainer fixed={fixed}>
      <Menu products={products} FAQLink={header_faq_link} />
      <Easyblue onClick={() => Router.push('/')} />
      {renderButtons()}
    </HeaderContainer>
  );
};