import { CloseButton, FillPreview, Tooltip } 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 { TRANSPARENT_HEX_COLOR } from "./../../../../../_shared/colors.js";
import { DELETE_SWATCH_BUTTON, SWATCH, SWATCH_TOOLTIP } from "../../data-hooks.js";
import classes from "./single-color-swatch-scss.js";
const SingleColorSwatch = ({
  fill,
  selectedColor,
  onClick,
  onMouseEnter,
  onMouseLeave,
  onDelete,
  className,
  onFocus,
  setRef,
  index
}) => {
  const { t, portal } = useContext(RicosContext);
  const [isHovered, setIsHovered] = useState(false);
  const isTransparent = fill === TRANSPARENT_HEX_COLOR;
  const tooltipContent = isTransparent ? t("ColorPicker_RemoveColor_Tooltip") : fill;
  const showDeleteButton = Boolean(onDelete) && !isTransparent && isHovered;
  return /* @__PURE__ */ React.createElement(
    "div",
    {
      className: classes.container,
      ref: setRef,
      onMouseEnter: () => setIsHovered(true),
      onMouseLeave: () => setIsHovered(false)
    },
    /* @__PURE__ */ React.createElement(
      Tooltip,
      {
        appendTo: portal,
        fixed: true,
        content: tooltipContent,
        dataHook: SWATCH_TOOLTIP,
        enterDelay: 1e3,
        size: "small",
        placement: "top",
        moveBy: { y: 10 },
        className
      },
      /* @__PURE__ */ React.createElement(
        FillPreview,
        {
          id: index,
          selected: selectedColor?.toUpperCase() === fill.toUpperCase(),
          "aria-selected": selectedColor?.toUpperCase() === fill.toUpperCase(),
          onClick: (e) => {
            e.preventDefault();
            e.stopPropagation();
            onClick(fill);
          },
          onMouseEnter: () => onMouseEnter?.(fill),
          onMouseLeave,
          fill: isTransparent ? void 0 : fill,
          dataHook: SWATCH,
          onFocus,
          "aria-label": `${fill} color swatch`,
          tabIndex: -1,
          role: "option"
        }
      )
    ),
    showDeleteButton && /* @__PURE__ */ React.createElement(
      CloseButton,
      {
        className: classes.deleteButton,
        dataHook: DELETE_SWATCH_BUTTON,
        "aria-label": t("DeleteButton_Tooltip"),
        skin: "standardFilled",
        size: "small",
        onMouseDown: (event) => {
          event.stopPropagation();
        },
        onClick: (event) => {
          event.preventDefault();
          event.stopPropagation();
          onMouseLeave?.();
          onDelete?.(fill);
        }
      },
      /* @__PURE__ */ React.createElement(DismissSmall, null)
    )
  );
};
export {
  SingleColorSwatch
};
//# sourceMappingURL=single-color-swatch.js.map
