"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = _interopRequireDefault(require("react"));
var _Box = _interopRequireDefault(require("../Box"));
var _SegmentedToggle = _interopRequireDefault(require("../SegmentedToggle"));
var _ToggleButton = _interopRequireDefault(require("../ToggleButton"));
var _ColorPickerConverterSt = require("./ColorPickerConverter.st.css.js");
var _ColorPickerConverterHex = _interopRequireDefault(require("./ColorPickerConverterHex"));
var _ColorPickerConverterHsb = _interopRequireDefault(require("./ColorPickerConverterHsb"));
var _ColorPickerConverterRGB = _interopRequireDefault(require("./ColorPickerConverterRGB"));
var _utils = require("./utils");
var _ColorPickerEyeDropper = require("./ColorPickerEyeDropper");
var _constants = require("./constants");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/ColorPicker/ColorPickerConverter.jsx";
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
var HEX = 'HEX';
var RGB = 'RGB';
var HSB = 'HSB';
var ColorPickerConverter = exports["default"] = /*#__PURE__*/function (_React$PureComponent) {
  function ColorPickerConverter(props) {
    var _this;
    (0, _classCallCheck2["default"])(this, ColorPickerConverter);
    _this = _callSuper(this, ColorPickerConverter, [props]);
    _this.state = {
      activeConverter: HEX
    };
    _this.changeConverter = function (evt, value) {
      _this.setState({
        activeConverter: value
      });
    };
    return _this;
  }
  (0, _inherits2["default"])(ColorPickerConverter, _React$PureComponent);
  return (0, _createClass2["default"])(ColorPickerConverter, [{
    key: "render",
    value: function render() {
      var _this2 = this;
      var _this$props = this.props,
        dataHook = _this$props.dataHook,
        current = _this$props.current,
        showConverter = _this$props.showConverter,
        showInput = _this$props.showInput,
        addTooltipContent = _this$props.addTooltipContent,
        allowEmpty = _this$props.allowEmpty,
        hexPlaceholder = _this$props.hexPlaceholder,
        showEyeDropper = _this$props.showEyeDropper,
        eyeDropperLabel = _this$props.eyeDropperLabel;
      var dataHooks = {
        hex: 'color-picker-hex-input',
        rgb: 'color-picker-rgb-inputs',
        hsb: 'color-picker-hsb-inputs'
      };
      var activeConverter = this.state.activeConverter;
      if (!showConverter && !showInput) {
        return null;
      }
      if (!showConverter) {
        return /*#__PURE__*/_react["default"].createElement(_Box["default"], {
          direction: "horizontal",
          gap: "small",
          align: "center",
          __self: this,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 51,
            columnNumber: 9
          }
        }, showEyeDropper && /*#__PURE__*/_react["default"].createElement(_ColorPickerEyeDropper.EyeDropper, {
          eyeDropperLabel: eyeDropperLabel,
          allowEmpty: allowEmpty,
          onChange: this.props.onChange,
          __self: this,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 53,
            columnNumber: 13
          }
        }), /*#__PURE__*/_react["default"].createElement(_ColorPickerConverterHex["default"], {
          placeholder: hexPlaceholder,
          dataHook: dataHooks.hex,
          current: current,
          onChange: this.props.onChange,
          onEnter: this.props.onEnter,
          onAdd: this.props.onAdd,
          addTooltipContent: addTooltipContent,
          allowEmpty: allowEmpty,
          __self: this,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 59,
            columnNumber: 11
          }
        }));
      }
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: (0, _ColorPickerConverterSt.st)(_ColorPickerConverterSt.classes.root),
        "data-hook": dataHook,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 74,
          columnNumber: 7
        }
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: (0, _ColorPickerConverterSt.st)(_ColorPickerConverterSt.classes.colorModelSwitcher),
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 75,
          columnNumber: 9
        }
      }, /*#__PURE__*/_react["default"].createElement(_SegmentedToggle["default"], {
        selected: activeConverter,
        onClick: function onClick(evt, value) {
          return _this2.changeConverter(evt, value);
        },
        size: "medium",
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 76,
          columnNumber: 11
        }
      }, /*#__PURE__*/_react["default"].createElement(_SegmentedToggle["default"].Button, {
        value: HEX,
        dataHook: _constants.DataHooks.hexConverterBtn,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 81,
          columnNumber: 13
        }
      }, HEX), /*#__PURE__*/_react["default"].createElement(_SegmentedToggle["default"].Button, {
        value: RGB,
        dataHook: _constants.DataHooks.rgbConverterBtn,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 87,
          columnNumber: 13
        }
      }, RGB), /*#__PURE__*/_react["default"].createElement(_SegmentedToggle["default"].Button, {
        value: HSB,
        dataHook: _constants.DataHooks.hsbConverterBtn,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 93,
          columnNumber: 13
        }
      }, HSB)), showEyeDropper && /*#__PURE__*/_react["default"].createElement(_ColorPickerEyeDropper.EyeDropper, {
        eyeDropperLabel: eyeDropperLabel,
        allowEmpty: allowEmpty,
        onChange: this.props.onChange,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 101,
          columnNumber: 13
        }
      })), activeConverter === HEX && /*#__PURE__*/_react["default"].createElement(_ColorPickerConverterHex["default"], {
        placeholder: hexPlaceholder,
        dataHook: dataHooks.hex,
        current: current,
        onChange: this.props.onChange,
        onAdd: this.props.onAdd,
        onEnter: this.props.onEnter,
        addTooltipContent: addTooltipContent,
        allowEmpty: allowEmpty,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 110,
          columnNumber: 11
        }
      }), activeConverter === RGB && /*#__PURE__*/_react["default"].createElement(_ColorPickerConverterRGB["default"], {
        dataHook: dataHooks.rgb,
        current: current,
        onChange: this.props.onChange,
        onAdd: this.props.onAdd,
        addTooltipContent: addTooltipContent,
        allowEmpty: allowEmpty,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 122,
          columnNumber: 11
        }
      }), activeConverter === HSB && /*#__PURE__*/_react["default"].createElement(_ColorPickerConverterHsb["default"], {
        dataHook: dataHooks.hsb,
        current: current,
        onChange: this.props.onChange,
        onAdd: this.props.onAdd,
        addTooltipContent: addTooltipContent,
        allowEmpty: allowEmpty,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 132,
          columnNumber: 11
        }
      }));
    }
  }]);
}(_react["default"].PureComponent);