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

export const useWindowSize = () => {
  const [size, setSize] = useState({ width: 0, height: 0 });

  const onResize = useCallback(() => {
    setSize({
      width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
      height:
        window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
    });
  }, []);

  useEffect(() => {
    onResize();
    window.addEventListener('resize', onResize, { passive: true });
    return () => window.removeEventListener('resize', onResize);
  }, [onResize]);

  return size;
};

export const useBreakpoint = () => {
  const [isMobile, setIsMobile] = useState(false);
  const [isTablet, setIsTablet] = useState(false);
  const [isDesktop, setIsDesktop] = useState(false);

  // breakpoints from variables.scss
  const breakpoint = {
    mobile: 480,
    tablet: 720,
    desktop: 1080,
  };

  const { width } = useWindowSize();

  useEffect(() => {
    if (width < breakpoint.mobile) {
      setIsMobile(true);
      setIsTablet(false);
      setIsDesktop(false);
      return;
    }
    if (width < breakpoint.tablet) {
      setIsMobile(false);
      setIsTablet(true);
      setIsDesktop(false);
      return;
    }
    setIsMobile(false);
    setIsTablet(false);
    setIsDesktop(true);
  }, [width]);
  return { isMobile, isTablet, isDesktop };
};

const useViewport = () => {
  const { isMobile, isTablet, isDesktop } = useBreakpoint();
  const windowSize = useWindowSize();
  return { isMobile, isTablet, isDesktop, windowSize };
};

export default useViewport;