import l from "react";
import x from "../../../../../../../../_virtual/index9.js";
import { isValidHex as b } from "../../helpers/color.js";
import "../common/Alpha.js";
import "../common/Checkboard.js";
import { EditableInput as p } from "../common/EditableInput.js";
import "../common/Hue.js";
import "../common/Raised.js";
import "../common/Saturation.js";
import "../common/Swatch.js";
var G = function(o) {
  var a = o.onChange, r = o.rgb, n = o.hsv, h = o.hex, e = x({
    default: {
      fields: {
        paddingTop: "5px",
        paddingBottom: "9px",
        width: "80px",
        position: "relative"
      },
      divider: {
        height: "5px"
      },
      RGBwrap: {
        position: "relative"
      },
      RGBinput: {
        marginLeft: "40%",
        width: "40%",
        height: "18px",
        border: "1px solid #888888",
        boxShadow: "inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC",
        marginBottom: "5px",
        fontSize: "13px",
        paddingLeft: "3px",
        marginRight: "10px"
      },
      RGBlabel: {
        left: "0px",
        top: "0px",
        width: "34px",
        textTransform: "uppercase",
        fontSize: "13px",
        height: "18px",
        lineHeight: "22px",
        position: "absolute"
      },
      HEXwrap: {
        position: "relative"
      },
      HEXinput: {
        marginLeft: "20%",
        width: "80%",
        height: "18px",
        border: "1px solid #888888",
        boxShadow: "inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC",
        marginBottom: "6px",
        fontSize: "13px",
        paddingLeft: "3px"
      },
      HEXlabel: {
        position: "absolute",
        top: "0px",
        left: "0px",
        width: "14px",
        textTransform: "uppercase",
        fontSize: "13px",
        height: "18px",
        lineHeight: "22px"
      },
      fieldSymbols: {
        position: "absolute",
        top: "5px",
        right: "-7px",
        fontSize: "13px"
      },
      symbol: {
        height: "20px",
        lineHeight: "22px",
        paddingBottom: "7px"
      }
    }
  }), i = function(t, s) {
    t["#"] ? b(t["#"]) && a({
      hex: t["#"],
      source: "hex"
    }, s) : t.r || t.g || t.b ? a({
      r: t.r || r.r,
      g: t.g || r.g,
      b: t.b || r.b,
      source: "rgb"
    }, s) : (t.h || t.s || t.v) && a({
      h: t.h || n.h,
      s: t.s || n.s,
      v: t.v || n.v,
      source: "hsv"
    }, s);
  };
  return l.createElement(
    "div",
    { style: e.fields },
    l.createElement(p, {
      style: { wrap: e.RGBwrap, input: e.RGBinput, label: e.RGBlabel },
      label: "h",
      value: Math.round(n.h),
      onChange: i
    }),
    l.createElement(p, {
      style: { wrap: e.RGBwrap, input: e.RGBinput, label: e.RGBlabel },
      label: "s",
      value: Math.round(n.s * 100),
      onChange: i
    }),
    l.createElement(p, {
      style: { wrap: e.RGBwrap, input: e.RGBinput, label: e.RGBlabel },
      label: "v",
      value: Math.round(n.v * 100),
      onChange: i
    }),
    l.createElement("div", { style: e.divider }),
    l.createElement(p, {
      style: { wrap: e.RGBwrap, input: e.RGBinput, label: e.RGBlabel },
      label: "r",
      value: r.r,
      onChange: i
    }),
    l.createElement(p, {
      style: { wrap: e.RGBwrap, input: e.RGBinput, label: e.RGBlabel },
      label: "g",
      value: r.g,
      onChange: i
    }),
    l.createElement(p, {
      style: { wrap: e.RGBwrap, input: e.RGBinput, label: e.RGBlabel },
      label: "b",
      value: r.b,
      onChange: i
    }),
    l.createElement("div", { style: e.divider }),
    l.createElement(p, {
      style: { wrap: e.HEXwrap, input: e.HEXinput, label: e.HEXlabel },
      label: "#",
      value: h.replace("#", ""),
      onChange: i
    }),
    l.createElement(
      "div",
      { style: e.fieldSymbols },
      l.createElement(
        "div",
        { style: e.symbol },
        "°"
      ),
      l.createElement(
        "div",
        { style: e.symbol },
        "%"
      ),
      l.createElement(
        "div",
        { style: e.symbol },
        "%"
      )
    )
  );
};
export {
  G as PhotoshopPicker,
  G as default
};
//# sourceMappingURL=PhotoshopFields.js.map
