import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import {
  __experimentalItemGroup as ItemGroup,
  FlexItem,
  __experimentalHStack as HStack,
  __experimentalZStack as ZStack,
  __experimentalVStack as VStack,
  ColorIndicator
} from "@wordpress/components";
import { isRTL, __ } from "@wordpress/i18n";
import { Icon, chevronLeft, chevronRight } from "@wordpress/icons";
import { useMemo } from "@wordpress/element";
import { privateApis as blockEditorPrivateApis } from "@wordpress/block-editor";
import Subtitle from "./subtitle";
import { NavigationButtonAsItem } from "./navigation-button";
import ColorIndicatorWrapper from "./color-indicator-wrapper";
import { unlock } from "../../lock-unlock";
const { useGlobalSetting } = unlock(blockEditorPrivateApis);
const EMPTY_COLORS = [];
function Palette({ name }) {
  const [customColors] = useGlobalSetting("color.palette.custom");
  const [themeColors] = useGlobalSetting("color.palette.theme");
  const [defaultColors] = useGlobalSetting("color.palette.default");
  const [defaultPaletteEnabled] = useGlobalSetting(
    "color.defaultPalette",
    name
  );
  const colors = useMemo(
    () => [
      ...customColors || EMPTY_COLORS,
      ...themeColors || EMPTY_COLORS,
      ...defaultColors && defaultPaletteEnabled ? defaultColors : EMPTY_COLORS
    ],
    [customColors, themeColors, defaultColors, defaultPaletteEnabled]
  );
  const screenPath = !name ? "/colors/palette" : "/blocks/" + encodeURIComponent(name) + "/colors/palette";
  return /* @__PURE__ */ jsxs(VStack, { spacing: 3, children: [
    /* @__PURE__ */ jsx(Subtitle, { level: 3, children: __("Palette") }),
    /* @__PURE__ */ jsx(ItemGroup, { isBordered: true, isSeparated: true, children: /* @__PURE__ */ jsx(NavigationButtonAsItem, { path: screenPath, children: /* @__PURE__ */ jsxs(HStack, { direction: "row", children: [
      colors.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
        /* @__PURE__ */ jsx(ZStack, { isLayered: false, offset: -8, children: colors.slice(0, 5).map(({ color }, index) => /* @__PURE__ */ jsx(
          ColorIndicatorWrapper,
          {
            children: /* @__PURE__ */ jsx(
              ColorIndicator,
              {
                colorValue: color
              }
            )
          },
          `${color}-${index}`
        )) }),
        /* @__PURE__ */ jsx(FlexItem, { isBlock: true, children: __("Edit palette") })
      ] }) : /* @__PURE__ */ jsx(FlexItem, { children: __("Add colors") }),
      /* @__PURE__ */ jsx(Icon, { icon: isRTL() ? chevronLeft : chevronRight })
    ] }) }) })
  ] });
}
var palette_default = Palette;
export {
  palette_default as default
};
//# sourceMappingURL=palette.js.map
