import { ref, onMounted, onBeforeUnmount, shallowReadonly, type Ref } from 'vue';

export interface MediaQueryOptions {
  /**
   * A custom media query string.
   * Example: "(max-width: 640px) or (hover: none)"
   * If provided, takes precedence over maxWidth.
   */
  query?: string;

  /**
   * Max width in px considered true.
   * Ignored if `query` is provided. Default: 768.
   */
  maxWidth?: number;
}

/**
 * Reactive state of a CSS media query.
 */
export function useMediaQuery(options: MediaQueryOptions = {}): Readonly<Ref<boolean>> {
  const query = options.query ?? `(max-width: ${options.maxWidth ?? 1024}px)`;
  const matches = ref(false);

  let mql: MediaQueryList | null = null;
  let onChange: ((ev: MediaQueryListEvent) => void) | null = null;

  const setup = () => {
    if ('undefined' === typeof window || !window.matchMedia) {
      return;
    }
    mql = window.matchMedia(query);
    matches.value = mql.matches;

    onChange = (ev) => {
      matches.value = ev.matches;
    };
    if ('addEventListener' in mql) {
      mql.addEventListener('change', onChange as EventListener);
      return;
    }

    // @ts-expect-error legacy Safari
    mql.addListener(onChange);
  };

  const teardown = () => {
    if (!mql || !onChange) return;
    if ('removeEventListener' in mql) {
      mql.removeEventListener('change', onChange as EventListener);
    } else {
      // @ts-expect-error legacy Safari
      mql.removeListener(onChange);
    }
    mql = null;
    onChange = null;
  };

  onMounted(setup);
  onBeforeUnmount(teardown);

  return shallowReadonly(matches);
}