import i, { PureComponent as d, Component as f } from "react";
import b from "../../../../../../../../_virtual/index9.js";
import m from "../../../../../../lodash-es@4.17.21/node_modules/lodash-es/throttle.js";
import { calculateChange as v } from "../../helpers/saturation.js";
var g = /* @__PURE__ */ function() {
  function r(t, o) {
    for (var e = 0; e < o.length; e++) {
      var n = o[e];
      n.enumerable = n.enumerable || !1, n.configurable = !0, "value" in n && (n.writable = !0), Object.defineProperty(t, n.key, n);
    }
  }
  return function(t, o, e) {
    return o && r(t.prototype, o), e && r(t, e), t;
  };
}();
function w(r, t) {
  if (!(r instanceof t))
    throw new TypeError("Cannot call a class as a function");
}
function y(r, t) {
  if (!r)
    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
  return t && (typeof t == "object" || typeof t == "function") ? t : r;
}
function x(r, t) {
  if (typeof t != "function" && t !== null)
    throw new TypeError("Super expression must either be null or a function, not " + typeof t);
  r.prototype = Object.create(t && t.prototype, { constructor: { value: r, enumerable: !1, writable: !0, configurable: !0 } }), t && (Object.setPrototypeOf ? Object.setPrototypeOf(r, t) : r.__proto__ = t);
}
var W = function(r) {
  x(t, r);
  function t(o) {
    w(this, t);
    var e = y(this, (t.__proto__ || Object.getPrototypeOf(t)).call(this, o));
    return e.handleChange = function(n) {
      typeof e.props.onChange == "function" && e.throttle(e.props.onChange, v(n, e.props.hsl, e.container), n);
    }, e.handleMouseDown = function(n) {
      e.handleChange(n);
      var a = e.getContainerRenderWindow();
      a.addEventListener("mousemove", e.handleChange), a.addEventListener("mouseup", e.handleMouseUp);
    }, e.handleMouseUp = function() {
      e.unbindEventListeners();
    }, e.throttle = m(function(n, a, l) {
      n(a, l);
    }, 50), e;
  }
  return g(t, [{
    key: "componentWillUnmount",
    value: function() {
      this.throttle.cancel(), this.unbindEventListeners();
    }
  }, {
    key: "getContainerRenderWindow",
    value: function() {
      for (var e = this.container, n = window; !n.document.contains(e) && n.parent !== n; )
        n = n.parent;
      return n;
    }
  }, {
    key: "unbindEventListeners",
    value: function() {
      var e = this.getContainerRenderWindow();
      e.removeEventListener("mousemove", this.handleChange), e.removeEventListener("mouseup", this.handleMouseUp);
    }
  }, {
    key: "render",
    value: function() {
      var e = this, n = this.props.style || {}, a = n.color, l = n.white, s = n.black, c = n.pointer, h = n.circle, u = b({
        default: {
          color: {
            absolute: "0px 0px 0px 0px",
            background: "hsl(" + this.props.hsl.h + ",100%, 50%)",
            borderRadius: this.props.radius
          },
          white: {
            absolute: "0px 0px 0px 0px",
            borderRadius: this.props.radius
          },
          black: {
            absolute: "0px 0px 0px 0px",
            boxShadow: this.props.shadow,
            borderRadius: this.props.radius
          },
          pointer: {
            position: "absolute",
            top: -(this.props.hsv.v * 100) + 100 + "%",
            left: this.props.hsv.s * 100 + "%",
            cursor: "default"
          },
          circle: {
            width: "4px",
            height: "4px",
            boxShadow: `0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3),
            0 0 1px 2px rgba(0,0,0,.4)`,
            borderRadius: "50%",
            cursor: "hand",
            transform: "translate(-2px, -2px)"
          }
        },
        custom: {
          color: a,
          white: l,
          black: s,
          pointer: c,
          circle: h
        }
      }, { custom: !!this.props.style });
      return i.createElement(
        "div",
        {
          style: u.color,
          ref: function(p) {
            return e.container = p;
          },
          onMouseDown: this.handleMouseDown,
          onTouchMove: this.handleChange,
          onTouchStart: this.handleChange
        },
        i.createElement(
          "style",
          null,
          `
          .saturation-white {
            background: -webkit-linear-gradient(to right, #fff, rgba(255,255,255,0));
            background: linear-gradient(to right, #fff, rgba(255,255,255,0));
          }
          .saturation-black {
            background: -webkit-linear-gradient(to top, #000, rgba(0,0,0,0));
            background: linear-gradient(to top, #000, rgba(0,0,0,0));
          }
        `
        ),
        i.createElement(
          "div",
          { style: u.white, className: "saturation-white" },
          i.createElement("div", { style: u.black, className: "saturation-black" }),
          i.createElement(
            "div",
            { style: u.pointer },
            this.props.pointer ? i.createElement(this.props.pointer, this.props) : i.createElement("div", { style: u.circle })
          )
        )
      );
    }
  }]), t;
}(d || f);
export {
  W as Saturation,
  W as default
};
//# sourceMappingURL=Saturation.js.map
