import { useEffect, useState } from "react";
import { useIsAppHydrated } from "../../../is-app-hydrated";

/**
 * React hook that tracks state of a CSS media query.
 * Based off of '@chakra-ui/react' useMediaQueryHook
 *
 * @param queries the media query to match memofied
 */
export function useMediaQuery(queries: string[]): boolean[] {
  const isHydrated = useIsAppHydrated();

  const [value, setValue] = useState(() => {
    return queries.map((query) => ({
      media: query,
      matches: typeof window === "object" && isHydrated ? window.matchMedia(query).matches : false,
    }));
  });

  useEffect(() => {
    setValue(
      queries.map((query) => ({
        media: query,
        matches: window.matchMedia(query).matches,
      }))
    );

    const mql = queries.map((query) => window.matchMedia(query));

    const handler = (evt: MediaQueryListEvent) => {
      setValue((prev) => {
        return prev.slice().map((item) => {
          if (item.media === evt.media) return { ...item, matches: evt.matches };
          return item;
        });
      });
    };

    mql.forEach((mql) => {
      mql.addEventListener("change", handler);
    });

    return () => {
      mql.forEach((mql) => {
        mql.removeEventListener("change", handler);
      });
    };
  }, [queries]);

  return value.map((item) => item.matches);
}