import { useState } from "react";

import { isBrowser } from "@/helpers/is-browser";

import useLayoutEffect from "./useIsomorphicLayoutEffect";

interface WindowSize {
  width: number;
  height: number;
}

interface WindowSizeOptions {
  triggerOnce: boolean;
}

export default function useWindowSize(
  { triggerOnce }: WindowSizeOptions = { triggerOnce: false },
): WindowSize {
  const [windowSize, setWindowSize] = useState<WindowSize>({
    width: isBrowser ? window.innerWidth : 0,
    height: isBrowser ? window.innerHeight : 0,
  });

  useLayoutEffect(() => {
    function handleResize() {
      const width = window.innerWidth;
      const height = window.innerHeight;
      setWindowSize({ width, height });
    }

    handleResize();

    if (!triggerOnce) {
      window.addEventListener("resize", handleResize);
      return () => {
        window.removeEventListener("resize", handleResize);
      };
    }
  }, []);

  return windowSize;
}