import { Box, FillPreview } from "@wix/design-system";
import React, { useContext, useMemo } from "react";
import { RicosContext } from "./../../ricos-context/index.js";
import { resolveColorToDisplayHex } from "./../resolve-color-to-display-hex.js";
import {
  Panel,
  PanelHeader,
  useClickOutside,
  usePanelContainerElement
} from "./../../ui-components/index.js";
const ShapeColorsModal = ({
  colorMap,
  onClose,
  isColorPickerOpen,
  openColorPickerFor,
  closeColorPicker
}) => {
  const { t } = useContext(RicosContext);
  const containerEl = usePanelContainerElement();
  const colorEntries = useMemo(
    () => Object.entries(colorMap).map(([originalColor, customColor]) => ({
      originalColor,
      displayedColor: customColor || originalColor
    })),
    [colorMap]
  );
  useClickOutside({
    containerRef: { current: containerEl },
    onClickOutside: () => {
      if (isColorPickerOpen()) {
        return;
      }
      onClose();
    }
  });
  const onColorClick = (entry) => {
    if (isColorPickerOpen()) {
      closeColorPicker();
      setTimeout(() => openColorPickerFor(entry, containerEl), 0);
    } else {
      openColorPickerFor(entry, containerEl);
    }
  };
  return /* @__PURE__ */ React.createElement(Panel, { closeButtonProps: { onClick: onClose } }, /* @__PURE__ */ React.createElement(PanelHeader, { title: t("Layout_SettingsModal_Tab_Design_Fill_Color") }), /* @__PURE__ */ React.createElement(
    Box,
    {
      paddingLeft: "SP3",
      paddingRight: "SP3",
      paddingTop: "SP2",
      paddingBottom: "SP2",
      direction: "horizontal",
      gap: "SP2",
      flexWrap: "wrap"
    },
    colorEntries.map((entry) => /* @__PURE__ */ React.createElement(Box, { key: entry.originalColor, height: "32px", width: "32px" }, /* @__PURE__ */ React.createElement(
      FillPreview,
      {
        fill: resolveColorToDisplayHex(entry.displayedColor, containerEl, {
          preserveAlpha: true
        }) ?? entry.displayedColor,
        onClick: () => onColorClick(entry)
      }
    )))
  ));
};
export {
  ShapeColorsModal
};
//# sourceMappingURL=shape-colors-modal.js.map
