// packages/components/src/color-picker/hsl-input.tsx
import { colord } from "colord";
import { useState, useEffect, useMemo } from "@wordpress/element";
import { InputWithSlider } from "./input-with-slider.js";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
var HslInput = ({
  color,
  onChange,
  enableAlpha
}) => {
  const colorPropHSLA = useMemo(() => color.toHsl(), [color]);
  const [internalHSLA, setInternalHSLA] = useState({
    ...colorPropHSLA
  });
  const isInternalColorSameAsReceivedColor = color.isEqual(colord(internalHSLA));
  useEffect(() => {
    if (!isInternalColorSameAsReceivedColor) {
      setInternalHSLA(colorPropHSLA);
    }
  }, [colorPropHSLA, isInternalColorSameAsReceivedColor]);
  const colorValue = isInternalColorSameAsReceivedColor ? internalHSLA : colorPropHSLA;
  const updateHSLAValue = (partialNewValue) => {
    const nextOnChangeValue = colord({
      ...colorValue,
      ...partialNewValue
    });
    if (!color.isEqual(nextOnChangeValue)) {
      onChange(nextOnChangeValue);
    } else {
      setInternalHSLA((prevHSLA) => ({
        ...prevHSLA,
        ...partialNewValue
      }));
    }
  };
  return /* @__PURE__ */ _jsxs(_Fragment, {
    children: [/* @__PURE__ */ _jsx(InputWithSlider, {
      min: 0,
      max: 359,
      label: "Hue",
      abbreviation: "H",
      value: colorValue.h,
      onChange: (nextH) => {
        updateHSLAValue({
          h: nextH
        });
      }
    }), /* @__PURE__ */ _jsx(InputWithSlider, {
      min: 0,
      max: 100,
      label: "Saturation",
      abbreviation: "S",
      value: colorValue.s,
      onChange: (nextS) => {
        updateHSLAValue({
          s: nextS
        });
      }
    }), /* @__PURE__ */ _jsx(InputWithSlider, {
      min: 0,
      max: 100,
      label: "Lightness",
      abbreviation: "L",
      value: colorValue.l,
      onChange: (nextL) => {
        updateHSLAValue({
          l: nextL
        });
      }
    }), enableAlpha && /* @__PURE__ */ _jsx(InputWithSlider, {
      min: 0,
      max: 100,
      label: "Alpha",
      abbreviation: "A",
      value: Math.trunc(100 * colorValue.a),
      onChange: (nextA) => {
        updateHSLAValue({
          a: nextA / 100
        });
      }
    })]
  });
};
export {
  HslInput
};
//# sourceMappingURL=hsl-input.js.map
