text: /* eslint "react-hooks/exhaustive-deps": "off" */
  
  import { Helmet } from 'react-helmet';
  import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
  import { useDispatch, useSelector } from 'react-redux';
  import { useLocation } from 'react-router-dom';
  import qs from 'qs';
  
  import Banner from './banner/Banner';
  import RouteMain from '../navigation/route/RouteMain';
  
  import { changeContainerHeight, changeContainerWidth } from '../../../state/actions/composition.actions';
  import { changeRouteLocation, changeRouteState } from '../../../state/actions/navigation.actions';
  import { debounce } from '../../utilities/event.util';
  
  function Main() {
    const dispatch = useDispatch();
    const location = useLocation();
  
    const [prevLocation, setPrevLocation] = useState(null);
    const routeIsPending = useSelector(state => state.navigation.routeIsPending);
  
    const footerRef = useRef(null);
    const mainRef = useRef(null);
    const search = qs.parse(location.search, { ignoreQueryPrefix: true });
  
    function onChangeOrientation() {
      setMainHeight();
      window.scrollTo(0, 0);
    }
  
    function onResizeWindow() {
      dispatch(changeContainerHeight(innerHeight));
      dispatch(changeContainerWidth(innerWidth));
  
      setMainHeight();
    }
  
    function setFooter() {
      const css = footerRef.current.classList;
  
      routeIsPending ? css.remove('loaded') : css.add('loaded');
    }
  
    function setMainHeight() {
      const banner = document.querySelector('.he-banner');
      const bannerHeight = window.getComputedStyle(banner, null).getPropertyValue('height');
      const height = innerHeight - (parseFloat(bannerHeight) + 152);
  
      mainRef.current.style.minHeight = height.toString() + 'px';
    }
  
    useEffect(() => {
      addEventListener('orientationchange', debounce(onChangeOrientation, 250), false);
      addEventListener('resize', debounce(onResizeWindow, 250), false);
      onResizeWindow();
  
      return () => {
        removeEventListener('orientationchange', debounce(onChangeOrientation, 250), false);
        removeEventListener('resize', debounce(onResizeWindow, 250), false);
      };
    }, []);
  
    useEffect(() => {
      if (!prevLocation || prevLocation.pathname !== location.pathname) {
        dispatch(changeRouteLocation(location));
  
        document.getElementById('document-top').focus();
        document.body.classList.remove('has-modal');
  
        setMainHeight();
        setPrevLocation(location);
        window.scrollTo(0, 0);
      }
    }, [location]);
  
    useLayoutEffect(() => setFooter(), [routeIsPending]);
    useEffect(() => setFooter(), [routeIsPending]);
  
    return (<>
      <Helmet htmlAttributes={{ class: search.sub || '' }} />
      <a id="document-top" tabIndex="-1"></a>
  
      <Banner />
      <main ref={mainRef}><RouteMain /></main>
      <footer ref={footerRef} role="contentinfo"><p>&copy; 2021 Dan Henning</p></footer>
    </>);
  }
  
  export default Main;
  