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

import { HeaderBlogContainer } from '../../styles/components/blog/Header.style';
import Easyblue from '../../assets/img/logo.svg';
import { Router } from '../../i18n';
import { HeaderBlogData } from '../../typings/entities';
import Menu from './Menu';
import Post from './Post';
import PrismicLink from '../PrismicLink';

interface Props extends HeaderBlogData {
  postRef?: RefObject<Post>;
}

export const Header: React.FC<Props> = (props) => {
  const [readProgress, setReadProgress] = useState<number>(0);
  let readOffset: number;
  let readHeight: number;
  const {
    postRef,
    header_blog_discover_label,
    header_blog_discover_link,
    first_post_tag,
    second_post_tag,
    third_post_tag,
    fourth_post_tag
  } = props;

  const onScroll = throttle(() => {
    const scrollY: number = window.scrollY;
    setReadProgress(Math.round((scrollY - readOffset) / readHeight * 100));
  }, 200);

  useEffect(() => {
    if (postRef) {
      readOffset = postRef.current?.getOffset();
      readHeight = postRef.current?.getHeight() - 400;
      onScroll();
      window.addEventListener('scroll', onScroll);
      return () => window.removeEventListener('scroll', onScroll);
    }
  }, []);

  return (
    <HeaderBlogContainer readProgress={readProgress}>
      <Menu postTags={[first_post_tag, second_post_tag, third_post_tag, fourth_post_tag]}>
        <PrismicLink link={header_blog_discover_link} linkProps={{
          button: true,
          extraSmall: true,
          color: 'yellow'
        }}>
          {header_blog_discover_label}
        </PrismicLink>
      </Menu>
      <Easyblue onClick={() => Router.push('/blog')}/>
      <div className="button-cta">
        <PrismicLink link={header_blog_discover_link} linkProps={{
          button: true,
          extraSmall: true,
          color: 'yellow'
        }}>
          {header_blog_discover_label}
        </PrismicLink>
      </div>
    </HeaderBlogContainer>
  );
};