import { useEffect, useState } from "react"

/**
 * Ab dieser Breite wechselt die App vom Handy- aufs Flächenlayout: Navigation
 * wandert von unten nach links, Inhalte dürfen mehrspaltig werden. Der Wert
 * stammt aus dem Design-Auftrag ("ab ca. 1000px").
 */
export const BREITER_BILDSCHIRM = "(min-width: 1000px)"

export function useBreiterBildschirm(): boolean {
  const [breit, setzeBreit] = useState<boolean>(() => {
    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false
    return window.matchMedia(BREITER_BILDSCHIRM).matches
  })

  useEffect(() => {
    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return
    const abfrage = window.matchMedia(BREITER_BILDSCHIRM)
    const beiAenderung = (ereignis: MediaQueryListEvent) => setzeBreit(ereignis.matches)
    abfrage.addEventListener("change", beiAenderung)
    setzeBreit(abfrage.matches)
    return () => abfrage.removeEventListener("change", beiAenderung)
  }, [])

  return breit
}
