"use client"
import { useCallback, useEffect, useState } from "react"
import { Size } from "../components/Media/createSizeProvider"
import { useThrottledCallback } from "./external"

export const useWindowSize = <T extends Partial<Size>>(
  initialWindowSize: T = {
    width: 0,
    height: 0,
  } as T,
) => {
  const [windowSize, setWindowSize] = useState<T>(initialWindowSize)

  const handleResize = useCallback(() => {
    setWindowSize({
      width: window.innerWidth,
      height: window.innerHeight,
    } as T)
  }, [])

  const onResize = useThrottledCallback(handleResize, 100)

  useEffect(() => {
    window.addEventListener("resize", onResize)

    // Call handler right away so state gets updated with initial window size
    handleResize()

    return () => window.removeEventListener("resize", onResize)
  }, [handleResize, onResize])

  return windowSize
}