"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// packages/components/src/custom-gradient-picker/gradient-bar/index.tsx
var gradient_bar_exports = {};
__export(gradient_bar_exports, {
  default: () => CustomGradientBar
});
module.exports = __toCommonJS(gradient_bar_exports);
var import_clsx = __toESM(require("clsx"), 1);
var import_element = require("@wordpress/element");
var import_control_points = __toESM(require("./control-points.cjs"), 1);
var import_utils = require("./utils.cjs");
var import_constants = require("./constants.cjs");
var import_jsx_runtime = require("react/jsx-runtime");
var customGradientBarReducer = (state, action) => {
  switch (action.type) {
    case "MOVE_INSERTER":
      if (state.id === "IDLE" || state.id === "MOVING_INSERTER") {
        return {
          id: "MOVING_INSERTER",
          insertPosition: action.insertPosition
        };
      }
      break;
    case "STOP_INSERTER_MOVE":
      if (state.id === "MOVING_INSERTER") {
        return {
          id: "IDLE"
        };
      }
      break;
    case "OPEN_INSERTER":
      if (state.id === "MOVING_INSERTER") {
        return {
          id: "INSERTING_CONTROL_POINT",
          insertPosition: state.insertPosition
        };
      }
      break;
    case "CLOSE_INSERTER":
      if (state.id === "INSERTING_CONTROL_POINT") {
        return {
          id: "IDLE"
        };
      }
      break;
    case "START_CONTROL_CHANGE":
      if (state.id === "IDLE") {
        return {
          id: "MOVING_CONTROL_POINT"
        };
      }
      break;
    case "STOP_CONTROL_CHANGE":
      if (state.id === "MOVING_CONTROL_POINT") {
        return {
          id: "IDLE"
        };
      }
      break;
  }
  return state;
};
var customGradientBarReducerInitialState = {
  id: "IDLE"
};
function CustomGradientBar({
  background,
  hasGradient,
  value: controlPoints,
  onChange,
  disableInserter = false,
  disableAlpha = false,
  __experimentalIsRenderedInSidebar = false
}) {
  const gradientMarkersContainerDomRef = (0, import_element.useRef)(null);
  const [gradientBarState, gradientBarStateDispatch] = (0, import_element.useReducer)(customGradientBarReducer, customGradientBarReducerInitialState);
  const onMouseEnterAndMove = (event) => {
    if (!gradientMarkersContainerDomRef.current) {
      return;
    }
    const insertPosition = (0, import_utils.getHorizontalRelativeGradientPosition)(event.clientX, gradientMarkersContainerDomRef.current);
    if (controlPoints.some(({
      position
    }) => {
      return Math.abs(insertPosition - position) < import_constants.MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT;
    })) {
      if (gradientBarState.id === "MOVING_INSERTER") {
        gradientBarStateDispatch({
          type: "STOP_INSERTER_MOVE"
        });
      }
      return;
    }
    gradientBarStateDispatch({
      type: "MOVE_INSERTER",
      insertPosition
    });
  };
  const onMouseLeave = () => {
    gradientBarStateDispatch({
      type: "STOP_INSERTER_MOVE"
    });
  };
  const isMovingInserter = gradientBarState.id === "MOVING_INSERTER";
  const isInsertingControlPoint = gradientBarState.id === "INSERTING_CONTROL_POINT";
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
    className: (0, import_clsx.default)("components-custom-gradient-picker__gradient-bar", {
      "has-gradient": hasGradient
    }),
    onMouseEnter: onMouseEnterAndMove,
    onMouseMove: onMouseEnterAndMove,
    onMouseLeave,
    children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
      className: "components-custom-gradient-picker__gradient-bar-background",
      style: {
        background,
        opacity: hasGradient ? 1 : 0.4
      }
    }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
      ref: gradientMarkersContainerDomRef,
      className: "components-custom-gradient-picker__markers-container",
      children: [!disableInserter && (isMovingInserter || isInsertingControlPoint) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_control_points.default.InsertPoint, {
        __experimentalIsRenderedInSidebar,
        disableAlpha,
        insertPosition: gradientBarState.insertPosition,
        value: controlPoints,
        onChange,
        onOpenInserter: () => {
          gradientBarStateDispatch({
            type: "OPEN_INSERTER"
          });
        },
        onCloseInserter: () => {
          gradientBarStateDispatch({
            type: "CLOSE_INSERTER"
          });
        }
      }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_control_points.default, {
        __experimentalIsRenderedInSidebar,
        disableAlpha,
        disableRemove: disableInserter,
        gradientPickerDomRef: gradientMarkersContainerDomRef,
        ignoreMarkerPosition: isInsertingControlPoint ? gradientBarState.insertPosition : void 0,
        value: controlPoints,
        onChange,
        onStartControlPointChange: () => {
          gradientBarStateDispatch({
            type: "START_CONTROL_CHANGE"
          });
        },
        onStopControlPointChange: () => {
          gradientBarStateDispatch({
            type: "STOP_CONTROL_CHANGE"
          });
        }
      })]
    })]
  });
}
//# sourceMappingURL=index.cjs.map
