import i from "react";
import p from "../../../../../../../../_virtual/index5.js";
import { isValidHex as f } from "../../helpers/color.js";
import h from "../../../../../../lodash-es@4.17.21/node_modules/lodash-es/isUndefined.js";
import "../common/Alpha.js";
import "../common/Checkboard.js";
import { EditableInput as s } from "../common/EditableInput.js";
import "../common/Hue.js";
import "../common/Raised.js";
import "../common/Saturation.js";
import "../common/Swatch.js";
import u from "../../../../../../../../_virtual/UnfoldMoreHorizontalIcon.js";
var g = /* @__PURE__ */ function() {
  function n(l, r) {
    for (var t = 0; t < r.length; t++) {
      var e = r[t];
      e.enumerable = e.enumerable || !1, e.configurable = !0, "value" in e && (e.writable = !0), Object.defineProperty(l, e.key, e);
    }
  }
  return function(l, r, t) {
    return r && n(l.prototype, r), t && n(l, t), l;
  };
}();
function c(n, l) {
  if (!(n instanceof l))
    throw new TypeError("Cannot call a class as a function");
}
function b(n, l) {
  if (!n)
    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
  return l && (typeof l == "object" || typeof l == "function") ? l : n;
}
function m(n, l) {
  if (typeof l != "function" && l !== null)
    throw new TypeError("Super expression must either be null or a function, not " + typeof l);
  n.prototype = Object.create(l && l.prototype, { constructor: { value: n, enumerable: !1, writable: !0, configurable: !0 } }), l && (Object.setPrototypeOf ? Object.setPrototypeOf(n, l) : n.__proto__ = l);
}
var v = function(n) {
  m(l, n);
  function l(r) {
    c(this, l);
    var t = b(this, (l.__proto__ || Object.getPrototypeOf(l)).call(this));
    return t.toggleViews = function() {
      t.state.view === "hex" ? t.setState({ view: "rgb" }) : t.state.view === "rgb" ? t.setState({ view: "hsl" }) : t.state.view === "hsl" && (t.props.hsl.a === 1 ? t.setState({ view: "hex" }) : t.setState({ view: "rgb" }));
    }, t.handleChange = function(e, o) {
      e.hex ? f(e.hex) && t.props.onChange({
        hex: e.hex,
        source: "hex"
      }, o) : e.r || e.g || e.b ? t.props.onChange({
        r: e.r || t.props.rgb.r,
        g: e.g || t.props.rgb.g,
        b: e.b || t.props.rgb.b,
        source: "rgb"
      }, o) : e.a ? (e.a < 0 ? e.a = 0 : e.a > 1 && (e.a = 1), t.props.onChange({
        h: t.props.hsl.h,
        s: t.props.hsl.s,
        l: t.props.hsl.l,
        a: Math.round(e.a * 100) / 100,
        source: "rgb"
      }, o)) : (e.h || e.s || e.l) && (typeof e.s == "string" && e.s.includes("%") && (e.s = e.s.replace("%", "")), typeof e.l == "string" && e.l.includes("%") && (e.l = e.l.replace("%", "")), e.s == 1 ? e.s = 0.01 : e.l == 1 && (e.l = 0.01), t.props.onChange({
        h: e.h || t.props.hsl.h,
        s: Number(h(e.s) ? t.props.hsl.s : e.s),
        l: Number(h(e.l) ? t.props.hsl.l : e.l),
        source: "hsl"
      }, o));
    }, t.showHighlight = function(e) {
      e.currentTarget.style.background = "#eee";
    }, t.hideHighlight = function(e) {
      e.currentTarget.style.background = "transparent";
    }, r.hsl.a !== 1 && r.view === "hex" ? t.state = {
      view: "rgb"
    } : t.state = {
      view: r.view
    }, t;
  }
  return g(l, [{
    key: "render",
    value: function() {
      var t = this, e = p({
        default: {
          wrap: {
            paddingTop: "16px",
            display: "flex"
          },
          fields: {
            flex: "1",
            display: "flex",
            marginLeft: "-6px"
          },
          field: {
            paddingLeft: "6px",
            width: "100%"
          },
          alpha: {
            paddingLeft: "6px",
            width: "100%"
          },
          toggle: {
            width: "32px",
            textAlign: "right",
            position: "relative"
          },
          icon: {
            marginRight: "-4px",
            marginTop: "12px",
            cursor: "pointer",
            position: "relative"
          },
          iconHighlight: {
            position: "absolute",
            width: "24px",
            height: "28px",
            background: "#eee",
            borderRadius: "4px",
            top: "10px",
            left: "12px",
            display: "none"
          },
          input: {
            fontSize: "11px",
            color: "#333",
            width: "100%",
            borderRadius: "2px",
            border: "none",
            boxShadow: "inset 0 0 0 1px #dadada",
            height: "21px",
            textAlign: "center"
          },
          label: {
            textTransform: "uppercase",
            fontSize: "11px",
            lineHeight: "11px",
            color: "#969696",
            textAlign: "center",
            display: "block",
            marginTop: "12px"
          },
          svg: {
            fill: "#333",
            width: "24px",
            height: "24px",
            border: "1px transparent solid",
            borderRadius: "5px"
          }
        },
        disableAlpha: {
          alpha: {
            display: "none"
          }
        }
      }, this.props, this.state), o = void 0;
      return this.state.view === "hex" ? o = i.createElement(
        "div",
        { style: e.fields, className: "flexbox-fix" },
        i.createElement(
          "div",
          { style: e.field },
          i.createElement(s, {
            style: { input: e.input, label: e.label },
            label: "hex",
            value: this.props.hex,
            onChange: this.handleChange
          })
        )
      ) : this.state.view === "rgb" ? o = i.createElement(
        "div",
        { style: e.fields, className: "flexbox-fix" },
        i.createElement(
          "div",
          { style: e.field },
          i.createElement(s, {
            style: { input: e.input, label: e.label },
            label: "r",
            value: this.props.rgb.r,
            onChange: this.handleChange
          })
        ),
        i.createElement(
          "div",
          { style: e.field },
          i.createElement(s, {
            style: { input: e.input, label: e.label },
            label: "g",
            value: this.props.rgb.g,
            onChange: this.handleChange
          })
        ),
        i.createElement(
          "div",
          { style: e.field },
          i.createElement(s, {
            style: { input: e.input, label: e.label },
            label: "b",
            value: this.props.rgb.b,
            onChange: this.handleChange
          })
        ),
        i.createElement(
          "div",
          { style: e.alpha },
          i.createElement(s, {
            style: { input: e.input, label: e.label },
            label: "a",
            value: this.props.rgb.a,
            arrowOffset: 0.01,
            onChange: this.handleChange
          })
        )
      ) : this.state.view === "hsl" && (o = i.createElement(
        "div",
        { style: e.fields, className: "flexbox-fix" },
        i.createElement(
          "div",
          { style: e.field },
          i.createElement(s, {
            style: { input: e.input, label: e.label },
            label: "h",
            value: Math.round(this.props.hsl.h),
            onChange: this.handleChange
          })
        ),
        i.createElement(
          "div",
          { style: e.field },
          i.createElement(s, {
            style: { input: e.input, label: e.label },
            label: "s",
            value: Math.round(this.props.hsl.s * 100) + "%",
            onChange: this.handleChange
          })
        ),
        i.createElement(
          "div",
          { style: e.field },
          i.createElement(s, {
            style: { input: e.input, label: e.label },
            label: "l",
            value: Math.round(this.props.hsl.l * 100) + "%",
            onChange: this.handleChange
          })
        ),
        i.createElement(
          "div",
          { style: e.alpha },
          i.createElement(s, {
            style: { input: e.input, label: e.label },
            label: "a",
            value: this.props.hsl.a,
            arrowOffset: 0.01,
            onChange: this.handleChange
          })
        )
      )), i.createElement(
        "div",
        { style: e.wrap, className: "flexbox-fix" },
        o,
        i.createElement(
          "div",
          { style: e.toggle },
          i.createElement(
            "div",
            { style: e.icon, onClick: this.toggleViews, ref: function(a) {
              return t.icon = a;
            } },
            i.createElement(u, {
              style: e.svg,
              onMouseOver: this.showHighlight,
              onMouseEnter: this.showHighlight,
              onMouseOut: this.hideHighlight
            })
          )
        )
      );
    }
  }], [{
    key: "getDerivedStateFromProps",
    value: function(t, e) {
      return t.hsl.a !== 1 && e.view === "hex" ? { view: "rgb" } : null;
    }
  }]), l;
}(i.Component);
v.defaultProps = {
  view: "hex"
};
export {
  v as ChromeFields,
  v as default
};
//# sourceMappingURL=ChromeFields.js.map
