import { useEffect, useState } from "react";

export function useMatchMedia(query: string): boolean {
  const getMatches = (q: string) => {
    if (typeof window !== "undefined") {
      return window.matchMedia(q).matches;
    }

    return false;
  };

  const [matches, setMatches] = useState(getMatches(query));

  const onChange = () => setMatches(getMatches(query));

  useEffect(() => {
    const mediaQueryList = window.matchMedia(query);

    onChange();

    if (mediaQueryList) {
      mediaQueryList.addEventListener("change", onChange);
    }

    if (mediaQueryList.addListener) {
      mediaQueryList.addListener(onChange);
    } else {
      mediaQueryList.addEventListener("change", onChange);
    }

    return () => {
      if (mediaQueryList.removeListener) {
        mediaQueryList.removeListener(onChange);
      } else {
        mediaQueryList.removeEventListener("change", onChange);
      }
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [query]);

  return matches;
}