import i from "react";
import y from "../../../../../../../../_virtual/index9.js";
import { isValidHex as v, isvalidColorString as g } from "../../helpers/color.js";
import "../common/Alpha.js";
import "../common/Checkboard.js";
import { EditableInput as h } 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, b = o.rgb, x = o.hsl, m = o.hex, f = o.hsv, p = function(r, s) {
    if (r.hex)
      v(r.hex) && a({
        hex: r.hex,
        source: "hex"
      }, s);
    else if (r.rgb) {
      var d = r.rgb.split(",");
      g(r.rgb, "rgb") && a({
        r: d[0],
        g: d[1],
        b: d[2],
        a: 1,
        source: "rgb"
      }, s);
    } else if (r.hsv) {
      var t = r.hsv.split(",");
      g(r.hsv, "hsv") && (t[2] = t[2].replace("%", ""), t[1] = t[1].replace("%", ""), t[0] = t[0].replace("°", ""), t[1] == 1 ? t[1] = 0.01 : t[2] == 1 && (t[2] = 0.01), a({
        h: Number(t[0]),
        s: Number(t[1]),
        v: Number(t[2]),
        source: "hsv"
      }, s));
    } else if (r.hsl) {
      var l = r.hsl.split(",");
      g(r.hsl, "hsl") && (l[2] = l[2].replace("%", ""), l[1] = l[1].replace("%", ""), l[0] = l[0].replace("°", ""), n[1] == 1 ? n[1] = 0.01 : n[2] == 1 && (n[2] = 0.01), a({
        h: Number(l[0]),
        s: Number(l[1]),
        v: Number(l[2]),
        source: "hsl"
      }, s));
    }
  }, e = y({
    default: {
      wrap: {
        display: "flex",
        height: "100px",
        marginTop: "4px"
      },
      fields: {
        width: "100%"
      },
      column: {
        paddingTop: "10px",
        display: "flex",
        justifyContent: "space-between"
      },
      double: {
        padding: "0px 4.4px",
        boxSizing: "border-box"
      },
      input: {
        width: "100%",
        height: "38px",
        boxSizing: "border-box",
        padding: "4px 10% 3px",
        textAlign: "center",
        border: "1px solid #dadce0",
        fontSize: "11px",
        textTransform: "lowercase",
        borderRadius: "5px",
        outline: "none",
        fontFamily: "Roboto,Arial,sans-serif"
      },
      input2: {
        height: "38px",
        width: "100%",
        border: "1px solid #dadce0",
        boxSizing: "border-box",
        fontSize: "11px",
        textTransform: "lowercase",
        borderRadius: "5px",
        outline: "none",
        paddingLeft: "10px",
        fontFamily: "Roboto,Arial,sans-serif"
      },
      label: {
        textAlign: "center",
        fontSize: "12px",
        background: "#fff",
        position: "absolute",
        textTransform: "uppercase",
        color: "#3c4043",
        width: "35px",
        top: "-6px",
        left: "0",
        right: "0",
        marginLeft: "auto",
        marginRight: "auto",
        fontFamily: "Roboto,Arial,sans-serif"
      },
      label2: {
        left: "10px",
        textAlign: "center",
        fontSize: "12px",
        background: "#fff",
        position: "absolute",
        textTransform: "uppercase",
        color: "#3c4043",
        width: "32px",
        top: "-6px",
        fontFamily: "Roboto,Arial,sans-serif"
      },
      single: {
        flexGrow: "1",
        margin: "0px 4.4px"
      }
    }
  }), c = b.r + ", " + b.g + ", " + b.b, u = Math.round(x.h) + "°, " + Math.round(x.s * 100) + "%, " + Math.round(x.l * 100) + "%", n = Math.round(f.h) + "°, " + Math.round(f.s * 100) + "%, " + Math.round(f.v * 100) + "%";
  return i.createElement(
    "div",
    { style: e.wrap, className: "flexbox-fix" },
    i.createElement(
      "div",
      { style: e.fields },
      i.createElement(
        "div",
        { style: e.double },
        i.createElement(h, {
          style: { input: e.input, label: e.label },
          label: "hex",
          value: m,
          onChange: p
        })
      ),
      i.createElement(
        "div",
        { style: e.column },
        i.createElement(
          "div",
          { style: e.single },
          i.createElement(h, {
            style: { input: e.input2, label: e.label2 },
            label: "rgb",
            value: c,
            onChange: p
          })
        ),
        i.createElement(
          "div",
          { style: e.single },
          i.createElement(h, {
            style: { input: e.input2, label: e.label2 },
            label: "hsv",
            value: n,
            onChange: p
          })
        ),
        i.createElement(
          "div",
          { style: e.single },
          i.createElement(h, {
            style: { input: e.input2, label: e.label2 },
            label: "hsl",
            value: u,
            onChange: p
          })
        )
      )
    )
  );
};
export {
  G as GoogleFields,
  G as default
};
//# sourceMappingURL=GoogleFields.js.map
