/* eslint-disable react-hooks/exhaustive-deps */
import React, { useEffect, useState } from 'react';
// eslint-disable-next-line import/no-extraneous-dependencies
import PropTypes from 'prop-types';

import LinkList from 'gatsby-core-theme/src/components/molecules/link-list';
import { getFirstModuleByName } from 'gatsby-core-theme/src/helpers/getters';
import styles from './footer-navigation.module.scss';

const FooterNavigation = ({ section, isStorybook = false }) => {
  const [show, setShow] = useState(false);
  let scrollY = typeof window !== 'undefined' && (window?.scrollY || 0);
  const menuArray = getFirstModuleByName(section, 'menu');

  const handleEvent = () => {
    if (window.scrollY > scrollY) {
      setShow(false);
    } else {
      setShow(true);
    }

    scrollY = window.scrollY;
  };
  useEffect(() => {
    window.addEventListener('scroll', handleEvent);

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

  return (
    <div
      className={`${styles?.footerLinks || ''} ${
        isStorybook ? styles?.storybookStyles || '' : ''
      } ${show ? styles?.showFooterNav || '' : ''}`}
    >
      <LinkList
        showListTitle={false}
        singleList
        lists={menuArray}
        width={48}
        height={48}
        gtmClass="mobile-menu-gtm"
      />
    </div>
  );
};

FooterNavigation.propTypes = {
  section: PropTypes.shape({
    modules: PropTypes.arrayOf(
      PropTypes.shape({
        name: PropTypes.string,
      })
    ),
  }).isRequired,
  isStorybook: PropTypes.bool,
};

export default FooterNavigation;
