import { useEffect, useState } from "react";
import { DEFAULT_WAIT_INTERVAL } from "../utils/constants";
import { debounce } from "../utils/utils";

export const useDebouncedWindowSize = (options?: {
  activateListner?: boolean;
  wait?: number;
}): { width: number; height: number } => {
  const { wait = DEFAULT_WAIT_INTERVAL, activateListner = true } =
    options ?? {};
  const [dimensions, setDimensions] = useState({
    height: window.innerHeight,
    width: window.innerWidth,
  });
  const resize = () => {
    setDimensions({
      height: window.innerHeight,
      width: window.innerWidth,
    });
  };

  useEffect(() => {
    if (activateListner) {
      window.addEventListener("resize", debounce(resize, wait));
    }
    return () => {
      window.removeEventListener("resize", debounce(resize, wait));
    };
  }, []);

  return dimensions;
};