"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
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 _ColorPicker = _interopRequireDefault(require("../ColorPicker"));
var _color = _interopRequireDefault(require("color"));
var _PopoverNext = _interopRequireDefault(require("../PopoverNext"));
var _FillButton = _interopRequireDefault(require("../FillButton"));
var _constants = require("./constants");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/Swatches/AddColor.jsx";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
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 EMPTY_COLOR = (0, _color["default"])('#00000000');
var AddColor = /*#__PURE__*/function (_React$PureComponent) {
  function AddColor() {
    var _this;
    (0, _classCallCheck2["default"])(this, AddColor);
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _callSuper(this, AddColor, [].concat(args));
    _this.state = {
      color: EMPTY_COLOR,
      shown: false
    };
    _this.toggleColorPicker = function (e) {
      e.preventDefault();
      _this.setState({
        shown: !_this.state.shown
      });
    };
    _this.hideColorPicker = function () {
      return _this.setState({
        shown: false,
        color: EMPTY_COLOR
      });
    };
    _this.setColor = function (color) {
      _this.setState({
        color: color
      });
      if (_this.props.onChange) {
        _this.props.onChange(color.hex());
      }
    };
    _this.confirm = function () {
      _this.hideColorPicker();
      _this.props.onAdd(_this.state.color.hex());
    };
    _this.cancel = function () {
      _this.hideColorPicker();
      if (_this.props.onCancel) {
        _this.props.onCancel();
      }
    };
    return _this;
  }
  (0, _inherits2["default"])(AddColor, _React$PureComponent);
  return (0, _createClass2["default"])(AddColor, [{
    key: "render",
    value: function render() {
      var _this2 = this;
      var _this$state = this.state,
        shown = _this$state.shown,
        color = _this$state.color;
      var isEmptyColor = color.alpha() === 0;
      var noColorSelected = !shown || isEmptyColor;
      var buttonColor = noColorSelected ? undefined : color.hex();
      var _this$props = this.props,
        tooltip = _this$props.tooltip,
        iconSize = _this$props.iconSize,
        customPopoverProps = _this$props.popoverProps,
        _this$props$renderCol = _this$props.renderColorPicker,
        renderColorPicker = _this$props$renderCol === void 0 ? function (_ref) {
          var cancel = _ref.cancel,
            confirm = _ref.confirm,
            setColor = _ref.setColor,
            currentColor = _ref.currentColor;
          return /*#__PURE__*/_react["default"].createElement(_ColorPicker["default"], {
            dataHook: _constants.dataHooks.addButtonColorPicker,
            onCancel: cancel,
            onChange: setColor,
            onConfirm: confirm,
            value: currentColor,
            allowEmpty: false,
            showConverter: false,
            showInput: false,
            __self: _this2,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 63,
              columnNumber: 9
            }
          });
        } : _this$props$renderCol;
      var popoverProps = _objectSpread({
        appendTo: 'window',
        placement: 'top',
        showArrow: true,
        open: shown,
        focusManagerEnabled: false,
        onOpenChange: function onOpenChange(open, reason) {
          if (!open && (reason === 'outside-press' || reason === 'escape-key')) {
            _this2.cancel();
          }
        }
      }, customPopoverProps);
      return /*#__PURE__*/_react["default"].createElement(_PopoverNext["default"], (0, _extends2["default"])({
        dataHook: _constants.dataHooks.addButtonPopover
      }, popoverProps, {
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 91,
          columnNumber: 7
        }
      }), /*#__PURE__*/_react["default"].createElement(_PopoverNext["default"].Trigger, {
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 92,
          columnNumber: 9
        }
      }, /*#__PURE__*/_react["default"].createElement("span", {
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 93,
          columnNumber: 11
        }
      }, /*#__PURE__*/_react["default"].createElement(_FillButton["default"], {
        dataHook: _constants.dataHooks.addButton,
        iconSize: iconSize,
        fill: buttonColor,
        onClick: this.toggleColorPicker,
        tooltipProps: {
          disabled: shown,
          timeout: 0,
          content: tooltip
        },
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 94,
          columnNumber: 13
        }
      }))), /*#__PURE__*/_react["default"].createElement(_PopoverNext["default"].Content, {
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 103,
          columnNumber: 9
        }
      }, renderColorPicker({
        cancel: this.cancel,
        confirm: this.confirm,
        setColor: this.setColor,
        currentColor: isEmptyColor ? '' : color
      })));
    }
  }]);
}(_react["default"].PureComponent);
var _default = exports["default"] = AddColor;