"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.ColorViewer = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
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 _PopoverNext = _interopRequireDefault(require("../../PopoverNext"));
var _ColorPicker = _interopRequireDefault(require("../../ColorPicker"));
var _DataHooks = _interopRequireDefault(require("../DataHooks"));
var _ColorViewerSt = require("./ColorViewer.st.css.js");
var _color2 = _interopRequireDefault(require("color"));
var _excluded = ["onTabOut", "onClickOutside"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/ColorInput/components/ColorViewer.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 ColorViewer = exports.ColorViewer = /*#__PURE__*/function (_React$Component) {
  function ColorViewer() {
    var _this;
    (0, _classCallCheck2["default"])(this, ColorViewer);
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _callSuper(this, ColorViewer, [].concat(args));
    _this.contentRef = /*#__PURE__*/_react["default"].createRef();
    _this._onDocumentKeyUp = function (event) {
      if (event.key !== 'Tab' || !_this.contentRef.current || _this.contentRef.current.contains(document.activeElement)) {
        return;
      }
      var _this$props = _this.props,
        popoverProps = _this$props.popoverProps,
        onTabOut = _this$props.onTabOut;
      popoverProps == null || popoverProps.onTabOut == null || popoverProps.onTabOut(event);
      onTabOut(event);
    };
    _this.onChange = function (_color) {
      var color = (0, _typeof2["default"])(_color) === 'object' ? _color : (0, _color2["default"])(_color);
      _this.props.onChange(color.alpha() === 0 ? '' : color.hex());
    };
    return _this;
  }
  (0, _inherits2["default"])(ColorViewer, _React$Component);
  return (0, _createClass2["default"])(ColorViewer, [{
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps) {
      if (!prevProps.active && this.props.active) {
        document.addEventListener('keyup', this._onDocumentKeyUp);
      } else if (prevProps.active && !this.props.active) {
        document.removeEventListener('keyup', this._onDocumentKeyUp);
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      document.removeEventListener('keyup', this._onDocumentKeyUp);
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props2 = this.props,
        value = _this$props2.value,
        disabled = _this$props2.disabled,
        active = _this$props2.active,
        onClick = _this$props2.onClick,
        onConfirm = _this$props2.onConfirm,
        onCancel = _this$props2.onCancel,
        size = _this$props2.size,
        _this$props2$placemen = _this$props2.placement,
        placement = _this$props2$placemen === void 0 ? 'bottom' : _this$props2$placemen,
        _this$props2$appendTo = _this$props2.appendTo,
        appendTo = _this$props2$appendTo === void 0 ? 'parent' : _this$props2$appendTo,
        onClickOutside = _this$props2.onClickOutside,
        children = _this$props2.children,
        onAddColor = _this$props2.onAddColor,
        addTooltipContent = _this$props2.addTooltipContent,
        placeholder = _this$props2.placeholder,
        popoverProps = _this$props2.popoverProps;

      // Extract Popover-only props not supported by PopoverNext to prevent spreading them
      var _unusedTabOut = popoverProps.onTabOut,
        _unusedClickOutside = popoverProps.onClickOutside,
        restPopoverProps = (0, _objectWithoutProperties2["default"])(popoverProps, _excluded);
      return /*#__PURE__*/_react["default"].createElement(_PopoverNext["default"], (0, _extends2["default"])({
        placement: placement,
        appendTo: appendTo
      }, restPopoverProps, {
        dataHook: _DataHooks["default"].COLOR_INPUT_POPOVER,
        showArrow: true,
        fixed: true,
        open: active,
        focusManagerEnabled: false,
        onOpenChange: function onOpenChange(open, reason) {
          if (!open) {
            if (reason === 'outside-press' && active) {
              onClickOutside == null || onClickOutside();
            } else if (reason === 'escape-key') {
              onCancel == null || onCancel();
            }
          }
        },
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 74,
          columnNumber: 7
        }
      }), /*#__PURE__*/_react["default"].createElement(_PopoverNext["default"].Trigger, {
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 93,
          columnNumber: 9
        }
      }, /*#__PURE__*/_react["default"].createElement("div", {
        onClick: disabled ? undefined : onClick,
        style: {
          backgroundColor: value
        },
        className: (0, _ColorViewerSt.st)(_ColorViewerSt.classes.root, {
          size: size
        }),
        "data-size": size,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 94,
          columnNumber: 11
        }
      }, value === '' && /*#__PURE__*/_react["default"].createElement("div", {
        "data-hook": _DataHooks["default"].COLOR_INPUT_VIEWER_LINE,
        className: _ColorViewerSt.classes.line,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 101,
          columnNumber: 15
        }
      }))), /*#__PURE__*/_react["default"].createElement(_PopoverNext["default"].Content, {
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 108,
          columnNumber: 9
        }
      }, /*#__PURE__*/_react["default"].createElement("div", {
        ref: this.contentRef,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 109,
          columnNumber: 11
        }
      }, /*#__PURE__*/_react["default"].createElement(_ColorPicker["default"], {
        dataHook: _DataHooks["default"].COLOR_INPUT_COLOR_PICKER,
        showConverter: false,
        showInput: true,
        onCancel: onCancel,
        onChange: this.onChange,
        onConfirm: onConfirm,
        value: value,
        onAdd: onAddColor,
        allowEmpty: true,
        addTooltipContent: addTooltipContent,
        emptyPlaceholder: placeholder,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 110,
          columnNumber: 13
        }
      }, children))));
    }
  }]);
}(_react["default"].Component);
ColorViewer.defaultProps = {
  popoverProps: {}
};