import f, { PureComponent as c, Component as d } from "react";
import v from "../../../../../../../../_virtual/index9.js";
import { calculateChange as m } from "../../helpers/hue.js";
var b = /* @__PURE__ */ function() {
  function t(e, o) {
    for (var r = 0; r < o.length; r++) {
      var n = o[r];
      n.enumerable = n.enumerable || !1, n.configurable = !0, "value" in n && (n.writable = !0), Object.defineProperty(e, n.key, n);
    }
  }
  return function(e, o, r) {
    return o && t(e.prototype, o), r && t(e, r), e;
  };
}();
function g(t, e) {
  if (!(t instanceof e))
    throw new TypeError("Cannot call a class as a function");
}
function s(t, e) {
  if (!t)
    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
  return e && (typeof e == "object" || typeof e == "function") ? e : t;
}
function w(t, e) {
  if (typeof e != "function" && e !== null)
    throw new TypeError("Super expression must either be null or a function, not " + typeof e);
  t.prototype = Object.create(e && e.prototype, { constructor: { value: t, enumerable: !1, writable: !0, configurable: !0 } }), e && (Object.setPrototypeOf ? Object.setPrototypeOf(t, e) : t.__proto__ = e);
}
var _ = function(t) {
  w(e, t);
  function e() {
    var o, r, n, u;
    g(this, e);
    for (var i = arguments.length, p = Array(i), a = 0; a < i; a++)
      p[a] = arguments[a];
    return u = (r = (n = s(this, (o = e.__proto__ || Object.getPrototypeOf(e)).call.apply(o, [this].concat(p))), n), n.handleChange = function(h) {
      var l = m(h, n.props.direction, n.props.hsl, n.container);
      l && typeof n.props.onChange == "function" && n.props.onChange(l, h);
    }, n.handleMouseDown = function(h) {
      n.handleChange(h), window.addEventListener("mousemove", n.handleChange), window.addEventListener("mouseup", n.handleMouseUp);
    }, n.handleMouseUp = function() {
      n.unbindEventListeners();
    }, r), s(n, u);
  }
  return b(e, [{
    key: "componentWillUnmount",
    value: function() {
      this.unbindEventListeners();
    }
  }, {
    key: "unbindEventListeners",
    value: function() {
      window.removeEventListener("mousemove", this.handleChange), window.removeEventListener("mouseup", this.handleMouseUp);
    }
  }, {
    key: "render",
    value: function() {
      var r = this, n = this.props.direction, u = n === void 0 ? "horizontal" : n, i = v({
        default: {
          hue: {
            absolute: "0px 0px 0px 0px",
            borderRadius: this.props.radius,
            boxShadow: this.props.shadow
          },
          container: {
            padding: "0 2px",
            position: "relative",
            height: "100%",
            borderRadius: this.props.radius
          },
          pointer: {
            position: "absolute",
            left: this.props.hsl.h * 100 / 360 + "%"
          },
          slider: {
            marginTop: "1px",
            width: "4px",
            borderRadius: "1px",
            height: "8px",
            boxShadow: "0 0 2px rgba(0, 0, 0, .6)",
            background: "#fff",
            transform: "translateX(-2px)"
          }
        },
        vertical: {
          pointer: {
            left: "0px",
            top: -(this.props.hsl.h * 100 / 360) + 100 + "%"
          }
        }
      }, { vertical: u === "vertical" });
      return f.createElement(
        "div",
        { style: i.hue },
        f.createElement(
          "div",
          {
            className: "hue-" + u,
            style: i.container,
            ref: function(a) {
              return r.container = a;
            },
            onMouseDown: this.handleMouseDown,
            onTouchMove: this.handleChange,
            onTouchStart: this.handleChange
          },
          f.createElement(
            "style",
            null,
            `
            .hue-horizontal {
              background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0
                33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
              background: -webkit-linear-gradient(to right, #f00 0%, #ff0
                17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
            }

            .hue-vertical {
              background: linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%,
                #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
              background: -webkit-linear-gradient(to top, #f00 0%, #ff0 17%,
                #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
            }
          `
          ),
          f.createElement(
            "div",
            { style: i.pointer },
            this.props.pointer ? f.createElement(this.props.pointer, this.props) : f.createElement("div", { style: i.slider })
          )
        )
      );
    }
  }]), e;
}(c || d);
export {
  _ as Hue,
  _ as default
};
//# sourceMappingURL=Hue.js.map
