import { jsx, jsxs } from "react/jsx-runtime";
import { useViewportMatch } from "@wordpress/compose";
import {
  __experimentalPaletteEdit as PaletteEdit,
  __experimentalVStack as VStack,
  Button
} from "@wordpress/components";
import { __ } from "@wordpress/i18n";
import { privateApis as blockEditorPrivateApis } from "@wordpress/block-editor";
import { shuffle } from "@wordpress/icons";
import { unlock } from "../../lock-unlock";
import ColorVariations from "./variations/variations-color";
import { useColorRandomizer } from "./hooks";
const { useGlobalSetting } = unlock(blockEditorPrivateApis);
const mobilePopoverProps = { placement: "bottom-start", offset: 8 };
function ColorPalettePanel({ name }) {
  const [themeColors, setThemeColors] = useGlobalSetting(
    "color.palette.theme",
    name
  );
  const [baseThemeColors] = useGlobalSetting(
    "color.palette.theme",
    name,
    "base"
  );
  const [defaultColors, setDefaultColors] = useGlobalSetting(
    "color.palette.default",
    name
  );
  const [baseDefaultColors] = useGlobalSetting(
    "color.palette.default",
    name,
    "base"
  );
  const [customColors, setCustomColors] = useGlobalSetting(
    "color.palette.custom",
    name
  );
  const [defaultPaletteEnabled] = useGlobalSetting(
    "color.defaultPalette",
    name
  );
  const isMobileViewport = useViewportMatch("small", "<");
  const popoverProps = isMobileViewport ? mobilePopoverProps : void 0;
  const [randomizeThemeColors] = useColorRandomizer();
  return /* @__PURE__ */ jsxs(
    VStack,
    {
      className: "edit-site-global-styles-color-palette-panel",
      spacing: 8,
      children: [
        /* @__PURE__ */ jsxs(VStack, { spacing: 4, children: [
          !!themeColors && !!themeColors.length && /* @__PURE__ */ jsx(
            PaletteEdit,
            {
              canReset: themeColors !== baseThemeColors,
              canOnlyChangeValues: true,
              colors: themeColors,
              onChange: setThemeColors,
              paletteLabel: __("Theme"),
              paletteLabelHeadingLevel: 3,
              popoverProps
            }
          ),
          window.__experimentalEnableColorRandomizer && themeColors?.length > 0 && /* @__PURE__ */ jsx(
            Button,
            {
              __next40pxDefaultSize: true,
              variant: "secondary",
              icon: shuffle,
              onClick: randomizeThemeColors,
              children: __("Randomize colors")
            }
          )
        ] }),
        !!defaultColors && !!defaultColors.length && !!defaultPaletteEnabled && /* @__PURE__ */ jsx(
          PaletteEdit,
          {
            canReset: defaultColors !== baseDefaultColors,
            canOnlyChangeValues: true,
            colors: defaultColors,
            onChange: setDefaultColors,
            paletteLabel: __("Default"),
            paletteLabelHeadingLevel: 3,
            popoverProps
          }
        ),
        /* @__PURE__ */ jsx(
          PaletteEdit,
          {
            colors: customColors,
            onChange: setCustomColors,
            paletteLabel: __("Custom"),
            paletteLabelHeadingLevel: 3,
            slugPrefix: "custom-",
            popoverProps
          }
        ),
        /* @__PURE__ */ jsx(ColorVariations, { title: __("Palettes") })
      ]
    }
  );
}
export {
  ColorPalettePanel as default
};
//# sourceMappingURL=color-palette-panel.js.map
