import t from "react";
import l from "../../../../../../../../_virtual/index7.js";
import m from "../../../../../../../../_virtual/index9.js";
import d from "../../../../../../lodash-es@4.17.21/node_modules/lodash-es/merge.js";
import "../common/Alpha.js";
import "../common/Checkboard.js";
import "../common/EditableInput.js";
import { Hue as u } from "../common/Hue.js";
import "../common/Raised.js";
import { Saturation as x } from "../common/Saturation.js";
import { ColorWrap as b } from "../common/ColorWrap.js";
import "../common/Swatch.js";
import { PhotoshopPicker as y } from "./PhotoshopFields.js";
import { PhotoshopPointerCircle as g } from "./PhotoshopPointerCircle.js";
import { PhotoshopPointerCircle as v } from "./PhotoshopPointer.js";
import { PhotoshopButton as h } from "./PhotoshopButton.js";
import { PhotoshopPreviews as w } from "./PhotoshopPreviews.js";
var P = /* @__PURE__ */ function() {
  function o(e, p) {
    for (var r = 0; r < p.length; r++) {
      var i = p[r];
      i.enumerable = i.enumerable || !1, i.configurable = !0, "value" in i && (i.writable = !0), Object.defineProperty(e, i.key, i);
    }
  }
  return function(e, p, r) {
    return p && o(e.prototype, p), r && o(e, r), e;
  };
}();
function E(o, e) {
  if (!(o instanceof e))
    throw new TypeError("Cannot call a class as a function");
}
function _(o, e) {
  if (!o)
    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
  return e && (typeof e == "object" || typeof e == "function") ? e : o;
}
function C(o, e) {
  if (typeof e != "function" && e !== null)
    throw new TypeError("Super expression must either be null or a function, not " + typeof e);
  o.prototype = Object.create(e && e.prototype, { constructor: { value: o, enumerable: !1, writable: !0, configurable: !0 } }), e && (Object.setPrototypeOf ? Object.setPrototypeOf(o, e) : o.__proto__ = e);
}
var a = function(o) {
  C(e, o);
  function e(p) {
    E(this, e);
    var r = _(this, (e.__proto__ || Object.getPrototypeOf(e)).call(this));
    return r.state = {
      currentColor: p.hex
    }, r;
  }
  return P(e, [{
    key: "render",
    value: function() {
      var r = this.props, i = r.styles, c = i === void 0 ? {} : i, s = r.className, f = s === void 0 ? "" : s, n = m(d({
        default: {
          picker: {
            background: "#DCDCDC",
            borderRadius: "4px",
            boxShadow: "0 0 0 1px rgba(0,0,0,.25), 0 8px 16px rgba(0,0,0,.15)",
            boxSizing: "initial",
            width: "513px"
          },
          head: {
            backgroundImage: "linear-gradient(-180deg, #F0F0F0 0%, #D4D4D4 100%)",
            borderBottom: "1px solid #B1B1B1",
            boxShadow: "inset 0 1px 0 0 rgba(255,255,255,.2), inset 0 -1px 0 0 rgba(0,0,0,.02)",
            height: "23px",
            lineHeight: "24px",
            borderRadius: "4px 4px 0 0",
            fontSize: "13px",
            color: "#4D4D4D",
            textAlign: "center"
          },
          body: {
            padding: "15px 15px 0",
            display: "flex"
          },
          saturation: {
            width: "256px",
            height: "256px",
            position: "relative",
            border: "2px solid #B3B3B3",
            borderBottom: "2px solid #F0F0F0",
            overflow: "hidden"
          },
          hue: {
            position: "relative",
            height: "256px",
            width: "19px",
            marginLeft: "10px",
            border: "2px solid #B3B3B3",
            borderBottom: "2px solid #F0F0F0"
          },
          controls: {
            width: "180px",
            marginLeft: "10px"
          },
          top: {
            display: "flex"
          },
          previews: {
            width: "60px"
          },
          actions: {
            flex: "1",
            marginLeft: "20px"
          }
        }
      }, c));
      return t.createElement(
        "div",
        { style: n.picker, className: "photoshop-picker " + f },
        t.createElement(
          "div",
          { style: n.head },
          this.props.header
        ),
        t.createElement(
          "div",
          { style: n.body, className: "flexbox-fix" },
          t.createElement(
            "div",
            { style: n.saturation },
            t.createElement(x, {
              hsl: this.props.hsl,
              hsv: this.props.hsv,
              pointer: g,
              onChange: this.props.onChange
            })
          ),
          t.createElement(
            "div",
            { style: n.hue },
            t.createElement(u, {
              direction: "vertical",
              hsl: this.props.hsl,
              pointer: v,
              onChange: this.props.onChange
            })
          ),
          t.createElement(
            "div",
            { style: n.controls },
            t.createElement(
              "div",
              { style: n.top, className: "flexbox-fix" },
              t.createElement(
                "div",
                { style: n.previews },
                t.createElement(w, {
                  rgb: this.props.rgb,
                  currentColor: this.state.currentColor
                })
              ),
              t.createElement(
                "div",
                { style: n.actions },
                t.createElement(h, { label: "OK", onClick: this.props.onAccept, active: !0 }),
                t.createElement(h, { label: "Cancel", onClick: this.props.onCancel }),
                t.createElement(y, {
                  onChange: this.props.onChange,
                  rgb: this.props.rgb,
                  hsv: this.props.hsv,
                  hex: this.props.hex
                })
              )
            )
          )
        )
      );
    }
  }]), e;
}(t.Component);
a.propTypes = {
  header: l.string,
  styles: l.object
};
a.defaultProps = {
  header: "Color Picker",
  styles: {}
};
b(a);
export {
  a as Photoshop
};
//# sourceMappingURL=Photoshop.js.map
