"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 _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _Selector = _interopRequireDefault(require("../Selector"));
var _Text = _interopRequireDefault(require("../Text"));
var _Button = _interopRequireDefault(require("../Button"));
var _IconButton = _interopRequireDefault(require("../IconButton"));
var _TextButton = _interopRequireDefault(require("../TextButton"));
var _EditableRow = _interopRequireDefault(require("./EditableRow/EditableRow"));
var _EditableSelectorSt = require("./EditableSelector.st.css.js");
var _constants = require("./constants");
var _IconThemeContext = require("../WixDesignSystemIconThemeProvider/IconThemeContext");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/EditableSelector/EditableSelector.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 EditableSelector = /*#__PURE__*/function (_React$PureComponent) {
  function EditableSelector() {
    var _this;
    (0, _classCallCheck2["default"])(this, EditableSelector);
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _callSuper(this, EditableSelector, [].concat(args));
    _this.state = {
      addingNewRow: false,
      editingRow: null
    };
    _this._addNewRow = function () {
      _this.setState({
        addingNewRow: true,
        editingRow: false
      });
    };
    _this._editItem = function (index) {
      _this.setState({
        editingRow: index,
        addingNewRow: false
      });
    };
    _this._deleteItem = function (index) {
      _this.props.onOptionDelete && _this.props.onOptionDelete({
        index: index
      });
    };
    _this._onNewOptionApprove = function (_ref) {
      var newTitle = _ref.newTitle,
        index = _ref.index;
      if (_this.state.addingNewRow) {
        _this.props.onOptionAdded && _this.props.onOptionAdded({
          newTitle: newTitle
        });
      } else {
        _this.props.onOptionEdit && _this.props.onOptionEdit({
          newTitle: newTitle,
          index: index
        });
      }
      _this.setState({
        addingNewRow: false,
        editingRow: null
      });
    };
    _this._onNewOptionCancel = function () {
      _this.setState({
        addingNewRow: false,
        editingRow: null
      });
    };
    _this._onOptionToggle = function (id) {
      _this.props.onOptionToggle && _this.props.onOptionToggle(id);
    };
    _this._renderInput = function (title, index) {
      return /*#__PURE__*/_react["default"].createElement(_EditableRow["default"], {
        key: index,
        dataHook: _constants.dataHooks.editRowWrapper,
        onApprove: function onApprove(newTitle) {
          return _this._onNewOptionApprove({
            newTitle: newTitle,
            index: index
          });
        },
        onCancel: function onCancel() {
          return _this._onNewOptionCancel();
        },
        newOption: title,
        __self: _this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 62,
          columnNumber: 7
        }
      });
    };
    return _this;
  }
  (0, _inherits2["default"])(EditableSelector, _React$PureComponent);
  return (0, _createClass2["default"])(EditableSelector, [{
    key: "render",
    value: function render() {
      var _this2 = this;
      var _this$props = this.props,
        dataHook = _this$props.dataHook,
        title = _this$props.title,
        newRowLabel = _this$props.newRowLabel,
        editButtonText = _this$props.editButtonText,
        toggleType = _this$props.toggleType;
      var options = this.props.options;
      options = options || [];
      return /*#__PURE__*/_react["default"].createElement(_IconThemeContext.IconThemeContext.Consumer, {
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 78,
          columnNumber: 7
        }
      }, function (_ref2) {
        var _icons$EditableSelect, _icons$EditableSelect2;
        var _ref2$icons = _ref2.icons,
          icons = _ref2$icons === void 0 ? {} : _ref2$icons;
        var AddIcon = ((_icons$EditableSelect = icons.EditableSelector) == null ? void 0 : _icons$EditableSelect.Add) || _wixUiIconsCommon.Add;
        var DeleteIcon = ((_icons$EditableSelect2 = icons.EditableSelector) == null ? void 0 : _icons$EditableSelect2.Delete) || _wixUiIconsCommon.Delete;
        return /*#__PURE__*/_react["default"].createElement("div", {
          "data-hook": dataHook,
          __self: _this2,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 84,
            columnNumber: 13
          }
        }, title && /*#__PURE__*/_react["default"].createElement("div", {
          className: _EditableSelectorSt.classes.title,
          "data-hook": _constants.dataHooks.title,
          __self: _this2,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 86,
            columnNumber: 17
          }
        }, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
          weight: "normal",
          __self: _this2,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 87,
            columnNumber: 19
          }
        }, title)), /*#__PURE__*/_react["default"].createElement("div", {
          __self: _this2,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 90,
            columnNumber: 15
          }
        }, options.map(function (option, index) {
          return _this2.state.editingRow === index ? _this2._renderInput(option.title, index) : /*#__PURE__*/_react["default"].createElement("div", {
            "data-hook": _constants.dataHooks.row,
            className: _EditableSelectorSt.classes.row,
            key: index,
            __self: _this2,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 95,
              columnNumber: 21
            }
          }, /*#__PURE__*/_react["default"].createElement(_Selector["default"], {
            dataHook: _constants.dataHooks.item,
            id: index,
            title: option.title,
            isSelected: option.isSelected,
            toggleType: toggleType,
            onToggle: function onToggle(id) {
              return _this2._onOptionToggle(id);
            },
            className: _EditableSelectorSt.classes.editableSelectorItem,
            __self: _this2,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 100,
              columnNumber: 23
            }
          }), /*#__PURE__*/_react["default"].createElement("div", {
            className: _EditableSelectorSt.classes.optionMenu,
            __self: _this2,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 109,
              columnNumber: 23
            }
          }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
            onClick: function onClick() {
              return _this2._deleteItem(index);
            },
            dataHook: _constants.dataHooks.deleteItem,
            type: "button",
            size: "small",
            priority: "secondary",
            __self: _this2,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 110,
              columnNumber: 25
            }
          }, /*#__PURE__*/_react["default"].createElement("span", {
            __self: _this2,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 117,
              columnNumber: 27
            }
          }, /*#__PURE__*/_react["default"].createElement(DeleteIcon, {
            __self: _this2,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 118,
              columnNumber: 29
            }
          }))), /*#__PURE__*/_react["default"].createElement("div", {
            className: _EditableSelectorSt.classes.editRow,
            __self: _this2,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 121,
              columnNumber: 25
            }
          }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
            onClick: function onClick() {
              return _this2._editItem(index);
            },
            dataHook: _constants.dataHooks.editItem,
            size: "small",
            __self: _this2,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 122,
              columnNumber: 27
            }
          }, editButtonText))));
        })), _this2.state.addingNewRow && _this2._renderInput(), /*#__PURE__*/_react["default"].createElement("div", {
          className: _EditableSelectorSt.classes.newRowButton,
          __self: _this2,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 136,
            columnNumber: 15
          }
        }, /*#__PURE__*/_react["default"].createElement(_TextButton["default"], {
          as: "a",
          underline: "none",
          onClick: _this2._addNewRow,
          prefixIcon: /*#__PURE__*/_react["default"].createElement(AddIcon, {
            className: _EditableSelectorSt.classes.icon,
            __self: _this2,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 141,
              columnNumber: 31
            }
          }),
          dataHook: _constants.dataHooks.newRowButtonText,
          __self: _this2,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 137,
            columnNumber: 17
          }
        }, newRowLabel)));
      });
    }
  }]);
}(_react["default"].PureComponent);
EditableSelector.defaultProps = {
  toggleType: 'checkbox',
  newRowLabel: 'New Row',
  editButtonText: 'Edit'
};
EditableSelector.displayName = 'EditableSelector';
var _default = exports["default"] = EditableSelector;