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

import Easyblue from '../../../assets/img/logo.svg';
import { Router } from '../../../i18n';
import { Link } from '../../../styles/components/shared/Link.style';
import { HeaderContainer } from '../../../styles/components/main/product/Header.style';
import { PrismicLink } from '../../../typings/prismic';
import { HeroComponent } from './Hero';

interface Props {
  heroRef: RefObject<HeroComponent>;
  CTALink: PrismicLink;
  CTALabel: string;
}

export const Header: React.FC<Props> = ({ heroRef,CTALink,CTALabel }) => {
  const [isShow, setShow] = useState<boolean>(false);
  let heroHeight;

  function onScroll(): void {
    const scrollY = window.scrollY;
    setShow(scrollY > heroHeight);
  }

  useEffect(() => {
    heroHeight = heroRef.current.getHeight() - 100;

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

  return (
    <HeaderContainer isShow={isShow}>
      <Easyblue onClick={() => Router.push('/')} />
      <Link
        href={CTALink?.url || '/'}
        extraSmall
        button
        color="yellow">
        {CTALabel || 'Je souscris en ligne'}
      </Link>
    </HeaderContainer>
  );
};