import { useState, useEffect } from "react";
import { vars, atoms } from "../../../css.mjs";
import { usePlayroomStore } from "./FrameComponent.mjs";
import { darkMode } from "../css/atoms/sprinkles.css.mjs";
import { useResponsiveValue } from "../components/Autosuggest/Autosuggest.mjs";
import { breakpoints } from "../css/breakpoints.mjs";
import { useToast } from "../components/private/Placeholder/Placeholder.mjs";
function useScope() {
  const responsiveValue = useResponsiveValue();
  const [colorMode, setColorMode] = useState(
    "lightMode"
  );
  useEffect(() => {
    const observer = new MutationObserver((mutationsList) => {
      for (const mutation of mutationsList) {
        if (mutation.type === "attributes" && mutation.attributeName === "class") {
          setColorMode(
            document.documentElement.classList.contains(darkMode) ? "darkMode" : "lightMode"
          );
        }
      }
    });
    observer.observe(document.documentElement, { attributes: true });
    return () => {
      observer.disconnect();
    };
  }, [colorMode]);
  function playroomColorModeValue(value) {
    if (typeof value !== "object" || !(value.darkMode || value.lightMode)) {
      return;
    }
    return document.documentElement.classList.contains(darkMode) ? value.darkMode : value.lightMode;
  }
  function playroomResponsiveValue(value) {
    Object.values(value).forEach((v) => {
      if (v === null) {
        throw new Error(
          `You cannot use 'null' as a value when using 'responsiveValue'.`
        );
      }
    });
    const resolvedValue = responsiveValue(value);
    if (resolvedValue === null) {
      return value.mobile;
    }
    return resolvedValue;
  }
  return {
    vars,
    atoms,
    breakpoints,
    showToast: useToast(),
    responsiveValue: playroomResponsiveValue,
    colorModeValue: playroomColorModeValue,
    ...usePlayroomStore()
  };
}
export {
  useScope
};
