var __assign = this && this.__assign || function () {
  __assign = Object.assign || function (t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];

      for (var p in s) {
        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
      }
    }

    return t;
  };

  return __assign.apply(this, arguments);
};

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { isValidHex } from 'react-color/lib/helpers/color';
import { EditableInput } from 'react-color/lib/components/common';
import { prefixClsCustom } from "./constant";
export var ColorFields = function ColorFields(_a) {
  var onChange = _a.onChange,
      rgb = _a.rgb,
      hsl = _a.hsl,
      hex = _a.hex;

  var handleChange = function handleChange(data, e) {
    if (data.hex) {
      if (isValidHex(data.hex)) {
        onChange({
          hex: data.hex,
          source: 'hex'
        }, e);
      }
    } else if (data.r || data.g || data.b) {
      onChange({
        r: data.r || rgb.r,
        g: data.g || rgb.g,
        b: data.b || rgb.b,
        a: rgb.a,
        source: 'rgb'
      }, e);
    } else if (data.a) {
      if (data.a < 0) {
        data.a = 0;
      } else if (data.a > 100) {
        data.a = 100;
      }

      data.a /= 100;
      onChange({
        h: hsl.h,
        s: hsl.s,
        l: hsl.l,
        a: data.a,
        source: 'rgb'
      }, e);
    }
  };

  return _jsxs("div", __assign({
    className: prefixClsCustom + "-fileld"
  }, {
    children: [_jsx("div", __assign({
      className: prefixClsCustom + "-fileld-double"
    }, {
      children: _jsx(EditableInput, {
        label: "hex",
        onChange: handleChange,
        value: hex.replace('#', '')
      }, void 0)
    }), void 0), _jsx("div", __assign({
      className: prefixClsCustom + "-fileld-single"
    }, {
      children: _jsx(EditableInput, {
        label: "r",
        value: rgb.r,
        dragLabel: "true",
        dragMax: "255",
        onChange: handleChange
      }, void 0)
    }), void 0), _jsx("div", __assign({
      className: prefixClsCustom + "-fileld-single"
    }, {
      children: _jsx(EditableInput, {
        label: "g",
        value: rgb.g,
        dragLabel: "true",
        dragMax: "255",
        onChange: handleChange
      }, void 0)
    }), void 0), _jsx("div", __assign({
      className: prefixClsCustom + "-fileld-single"
    }, {
      children: _jsx(EditableInput, {
        label: "b",
        value: rgb.b,
        dragLabel: "true",
        dragMax: "255",
        onChange: handleChange
      }, void 0)
    }), void 0), _jsx("div", __assign({
      className: prefixClsCustom + "-fileld-alpha"
    }, {
      children: _jsx(EditableInput, {
        label: "a",
        dragLabel: "true",
        dragMax: "100",
        onChange: handleChange,
        value: Math.round((rgb.a || 0) * 100)
      }, void 0)
    }), void 0)]
  }), void 0);
};
ColorFields.displayName = 'ColorFields';
export default ColorFields;
var ColorFieldsMemo = /*#__PURE__*/React.memo(ColorFields);
ColorFieldsMemo.displayName = 'ColorFieldsMemo';
export { ColorFieldsMemo };

