import { useEffect, useState } from 'react';

function getMatches(query: string, defaultValue: boolean): boolean {
  if (typeof window === 'undefined' || !window.matchMedia) {
    return defaultValue;
  }

  return window.matchMedia(query).matches;
}

export function useMediaQuery(query: string, defaultValue = false): boolean {
  const [matches, setMatches] = useState(() => getMatches(query, defaultValue));

  useEffect(() => {
    if (typeof window === 'undefined' || !window.matchMedia) {
      return undefined;
    }

    const media = window.matchMedia(query);
    const update = () => setMatches(media.matches);

    update();

    if ('addEventListener' in media) {
      media.addEventListener('change', update);
      return () => media.removeEventListener('change', update);
    }

    media.addListener(update);
    return () => media.removeListener(update);
  }, [query]);

  return matches;
}