import { Box, FillPreview, IconButton, Input, NumberInput, Slider } from "@wix/design-system";
import { DeleteSmall } from "@wix/wix-ui-icons-common";
import React, { useContext, useMemo, useState } from "react";
import { RicosContext } from "./../../../../../ricos-context/index.js";
import { resolveColorToDisplayHex } from "./../../../../../_shared/resolve-color-to-display-hex.js";
import {
  combineHexWithOpacity,
  getHexColorFromAlpha,
  getOpacityFromHex
} from "./../../../../../wix-rich-content-common/index.js";
import { usePanelContainerElement } from "./../../../../ui-components-provider.js";
const GradientStopEditor = ({
  value,
  stop,
  onChange,
  originalIndex,
  onColorPickerOpen
}) => {
  const { t } = useContext(RicosContext);
  const panelContainerEl = usePanelContainerElement();
  const [containerElement, setContainerElement] = useState(null);
  const colorResolverElement = panelContainerEl ?? containerElement;
  const displayColor = useMemo(
    () => resolveColorToDisplayHex(stop.color, colorResolverElement),
    [stop.color, colorResolverElement]
  );
  const previewColor = useMemo(
    () => resolveColorToDisplayHex(stop.color, colorResolverElement, { preserveAlpha: true }),
    [stop.color, colorResolverElement]
  );
  const stopOpacity = getOpacityFromHex(stop.color);
  return /* @__PURE__ */ React.createElement(Box, { key: originalIndex, direction: "horizontal", gap: "SP2", ref: setContainerElement }, /* @__PURE__ */ React.createElement(Box, { width: "100%", marginRight: "SP2" }, /* @__PURE__ */ React.createElement(
    Slider,
    {
      displayMarks: false,
      gradientColor: displayColor,
      min: 0,
      max: 100,
      value: stopOpacity,
      onChange: (newOpacity) => {
        const opacityValue = Array.isArray(newOpacity) ? newOpacity[0] : newOpacity;
        onChange({
          ...value,
          stops: value.stops?.map(
            (s, i) => i === originalIndex ? {
              ...s,
              color: combineHexWithOpacity(getHexColorFromAlpha(s.color), opacityValue)
            } : s
          )
        });
      }
    }
  )), /* @__PURE__ */ React.createElement(Box, { flexShrink: "0", width: "70px" }, /* @__PURE__ */ React.createElement(
    NumberInput,
    {
      value: stopOpacity,
      suffix: /* @__PURE__ */ React.createElement(Input.Affix, null, "%"),
      size: "small",
      min: 0,
      max: 100,
      hideStepper: true,
      onChange: (newOpacity) => {
        const opacityValue = Math.max(0, Math.min(100, Number(newOpacity)));
        onChange({
          ...value,
          stops: value.stops?.map(
            (s, i) => i === originalIndex ? {
              ...s,
              color: combineHexWithOpacity(getHexColorFromAlpha(s.color), opacityValue)
            } : s
          )
        });
      }
    }
  )), /* @__PURE__ */ React.createElement(Box, { flexShrink: "0" }, /* @__PURE__ */ React.createElement(
    FillPreview,
    {
      dataHook: `gradient-fill-preview-${originalIndex}`,
      size: "small",
      onClick: () => {
        onColorPickerOpen?.({
          originalIndex,
          stop,
          referenceElement: containerElement
        });
      },
      fill: previewColor
    }
  )), /* @__PURE__ */ React.createElement(Box, { flexShrink: "0" }, /* @__PURE__ */ React.createElement(
    IconButton,
    {
      ariaLabel: t("GradientPicker_RemoveStop_Tooltip"),
      disabled: value.stops?.length === 1,
      priority: "secondary",
      size: "small",
      onClick: () => {
        onChange({
          ...value,
          stops: value.stops?.filter((_, i) => i !== originalIndex)
        });
      }
    },
    /* @__PURE__ */ React.createElement(DeleteSmall, null)
  )));
};
export {
  GradientStopEditor
};
//# sourceMappingURL=gradient-stop-editor.js.map
