"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 _Checkbox = _interopRequireDefault(require("../../Checkbox"));
var _ToggleSwitch = _interopRequireDefault(require("../../ToggleSwitch"));
var _Radio = _interopRequireDefault(require("../../Radio"));
var _Text = _interopRequireDefault(require("../../Text"));
var _Collapse = _interopRequireDefault(require("../../Collapse"));
var _Divider = _interopRequireDefault(require("../../Divider"));
var _constants = require("../constants");
var _StringUtils = require("../../utils/StringUtils");
var _ItemSt = require("./Item.st.css.js");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/SelectableAccordion/Item/Item.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 SelectableAccordionItem = exports["default"] = /*#__PURE__*/function (_React$PureComponent) {
  function SelectableAccordionItem() {
    var _this;
    (0, _classCallCheck2["default"])(this, SelectableAccordionItem);
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _callSuper(this, SelectableAccordionItem, [].concat(args));
    _this.state = {
      hovered: false
    };
    _this._onChange = function (event) {
      var _this$props = _this.props,
        idx = _this$props.idx,
        type = _this$props.type,
        open = _this$props.open,
        onChange = _this$props.onChange,
        disabled = _this$props.disabled;
      if (disabled) {
        return;
      }
      if (type === 'radio' && open) {
        return;
      }
      onChange(event, idx, !open);
    };
    _this._onMouseEnter = function () {
      return _this.setState({
        hovered: true
      });
    };
    _this._onMouseLeave = function () {
      return _this.setState({
        hovered: false
      });
    };
    return _this;
  }
  (0, _inherits2["default"])(SelectableAccordionItem, _React$PureComponent);
  return (0, _createClass2["default"])(SelectableAccordionItem, [{
    key: "_renderSelector",
    value: function _renderSelector() {
      var _this$props2 = this.props,
        type = _this$props2.type,
        open = _this$props2.open,
        disabled = _this$props2.disabled;
      var selector = null;
      switch (type) {
        case _constants.TYPES.CHECKBOX:
          selector = /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
            checked: open,
            onChange: this._onChange,
            disabled: disabled,
            __self: this,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 47,
              columnNumber: 11
            }
          });
          break;
        case _constants.TYPES.RADIO:
          selector = /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
            checked: open,
            onChange: this._onChange,
            disabled: disabled,
            __self: this,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 56,
              columnNumber: 11
            }
          });
          break;
        case _constants.TYPES.TOGGLE:
          selector = /*#__PURE__*/_react["default"].createElement(_ToggleSwitch["default"], {
            checked: open,
            onChange: this._onChange,
            size: "small",
            disabled: disabled,
            __self: this,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 61,
              columnNumber: 11
            }
          });
          break;
        default:
          break;
      }
      return /*#__PURE__*/_react["default"].createElement("span", {
        className: _ItemSt.classes.selectorToggle,
        onClick: function onClick(e) {
          return e.stopPropagation();
        },
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 73,
          columnNumber: 7
        }
      }, selector);
    }
  }, {
    key: "_renderTitle",
    value: function _renderTitle() {
      var title = this.props.title;
      if ((0, _StringUtils.isString)(title)) {
        return /*#__PURE__*/_react["default"].createElement(_Text["default"], {
          weight: "normal",
          size: "medium",
          __self: this,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 87,
            columnNumber: 9
          }
        }, title);
      } else {
        return title;
      }
    }
  }, {
    key: "_renderContent",
    value: function _renderContent() {
      var content = this.props.content;
      return (0, _StringUtils.isString)(content) ? /*#__PURE__*/_react["default"].createElement(_Text["default"], {
        className: _ItemSt.classes.text,
        size: "small",
        weight: "thin",
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 100,
          columnNumber: 7
        }
      }, content) : content;
    }
  }, {
    key: "_renderSubtitle",
    value: function _renderSubtitle() {
      var subtitle = this.props.subtitle;
      return (0, _StringUtils.isString)(subtitle) ? /*#__PURE__*/_react["default"].createElement(_Text["default"], {
        ellipsis: true,
        size: "small",
        weight: "thin",
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 112,
          columnNumber: 7
        }
      }, subtitle) : subtitle;
    }
  }, {
    key: "render",
    value: function render() {
      var hovered = this.state.hovered;
      var _this$props3 = this.props,
        open = _this$props3.open,
        verticalPadding = _this$props3.verticalPadding,
        disabled = _this$props3.disabled,
        content = _this$props3.content;
      return /*#__PURE__*/_react["default"].createElement("div", {
        "data-hook": _constants.dataHooks.item,
        "data-state": open ? 'open' : 'collapsed',
        "data-disabled": disabled,
        className: (0, _ItemSt.st)(_ItemSt.classes.item, {
          hovered: !open && hovered,
          verticalPadding: verticalPadding,
          disabled: disabled
        }),
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 125,
          columnNumber: 7
        }
      }, /*#__PURE__*/_react["default"].createElement("div", {
        onMouseEnter: this._onMouseEnter,
        onMouseLeave: this._onMouseLeave,
        onClick: this._onChange,
        className: _ItemSt.classes.selector,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 135,
          columnNumber: 9
        }
      }, this._renderSelector()), /*#__PURE__*/_react["default"].createElement("div", {
        "data-hook": _constants.dataHooks.itemHeader,
        onMouseEnter: this._onMouseEnter,
        onMouseLeave: this._onMouseLeave,
        onClick: this._onChange,
        className: _ItemSt.classes.header,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 143,
          columnNumber: 9
        }
      }, this._renderTitle(), this._renderSubtitle()), /*#__PURE__*/_react["default"].createElement("div", {
        className: _ItemSt.classes.content,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 153,
          columnNumber: 9
        }
      }, content ? /*#__PURE__*/_react["default"].createElement(_Collapse["default"], {
        open: open,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 155,
          columnNumber: 13
        }
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: _ItemSt.classes.inner,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 156,
          columnNumber: 15
        }
      }, this._renderContent())) : null, /*#__PURE__*/_react["default"].createElement("div", {
        className: _ItemSt.classes.divider,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 159,
          columnNumber: 11
        }
      }, /*#__PURE__*/_react["default"].createElement(_Divider["default"], {
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 160,
          columnNumber: 13
        }
      }))));
    }
  }]);
}(_react["default"].PureComponent);
SelectableAccordionItem.defaultProps = {
  type: 'toggle',
  onChange: function onChange() {}
};
SelectableAccordionItem.displayName = 'SelectableAccordionItem';