import { useLayoutEffect, useState } from "react";
import WindowWidthType from "./windowWidthType";
import { useEffect, useRef } from "@wordpress/element";

export default function useWindowSize() {
  const [windowSize, setWindowSize] = useState(WindowWidthType.SM);

  useEffect(() => {
    function updateWindowSize() {
      if (window.innerWidth >= WindowWidthType.LG)
        setWindowSize(WindowWidthType.LG);
      else if (window.innerWidth >= WindowWidthType.MD)
        setWindowSize(WindowWidthType.MD);
      else setWindowSize(WindowWidthType.SM);
    }

    window.addEventListener("resize", updateWindowSize);
    updateWindowSize();
    return () => {
      window.removeEventListener("resize", updateWindowSize);
    };
  }, []);
  return windowSize;
}
