import { CloseButton, FillPreview } from "@wix/design-system";
import { DismissSmall } from "@wix/wix-ui-icons-common";
import React, { useContext, useState } from "react";
import { RicosContext } from "./../../../../../ricos-context/index.js";
import { schemaGradientToCss } from "./../../../../../_shared/schema-gradient-to-css.js";
import { DELETE_GRADIENT_BUTTON, GRADIENT_SWATCH } from "../../data-hooks.js";
import { areGradientsEqual } from "./gradient-picker-utils.js";
import classes from "./gradient-picker-scss.js";
const CustomGradientSwatch = ({
  gradient,
  index,
  isSelected,
  onGradientSelected,
  onGradientDeleted
}) => {
  const { t, theme } = useContext(RicosContext);
  const [isHovered, setIsHovered] = useState(false);
  const gradientCss = schemaGradientToCss(gradient, theme.colorPalette);
  return /* @__PURE__ */ React.createElement(
    "div",
    {
      className: classes.customGradientSwatch,
      onMouseEnter: () => setIsHovered(true),
      onMouseLeave: () => setIsHovered(false)
    },
    /* @__PURE__ */ React.createElement(
      FillPreview,
      {
        id: `${index}`,
        dataHook: GRADIENT_SWATCH,
        selected: isSelected,
        onClick: () => onGradientSelected(gradient),
        fill: gradientCss
      }
    ),
    isHovered && onGradientDeleted && /* @__PURE__ */ React.createElement(
      CloseButton,
      {
        className: classes.deleteButton,
        dataHook: DELETE_GRADIENT_BUTTON,
        "aria-label": t("DeleteButton_Tooltip"),
        skin: "standardFilled",
        size: "small",
        onMouseDown: (event) => {
          event.stopPropagation();
        },
        onClick: (event) => {
          event.preventDefault();
          event.stopPropagation();
          onGradientDeleted(gradient);
        }
      },
      /* @__PURE__ */ React.createElement(DismissSmall, null)
    )
  );
};
const CustomGradients = ({
  gradients,
  selectedGradient,
  onGradientSelected,
  onGradientDeleted
}) => {
  return /* @__PURE__ */ React.createElement("div", { className: classes.customGradientsGrid }, gradients.map((gradient, index) => {
    const isSelected = areGradientsEqual(gradient, selectedGradient);
    return /* @__PURE__ */ React.createElement(
      CustomGradientSwatch,
      {
        key: index,
        index,
        gradient,
        isSelected,
        onGradientSelected,
        onGradientDeleted
      }
    );
  }));
};
export {
  CustomGradients
};
//# sourceMappingURL=custom-gradients.js.map
