"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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
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 _SegmentedToggleSt = require("./SegmentedToggle.st.css.js");
var _ToggleButton = _interopRequireDefault(require("./ToggleButton/ToggleButton"));
var _ToggleIcon = _interopRequireDefault(require("./ToggleIcon/ToggleIcon"));
var _excluded = ["dataHook", "children", "disabled", "size", "defaultSelected", "onClick", "selected", "ariaLabel", "ariaLabelledby", "fullWidth"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/SegmentedToggle/SegmentedToggle.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 SegmentedToggle = /*#__PURE__*/function (_React$Component) {
  function SegmentedToggle() {
    var _this;
    (0, _classCallCheck2["default"])(this, SegmentedToggle);
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _callSuper(this, SegmentedToggle, [].concat(args));
    _this.state = {
      selected: _this.props.defaultSelected
    };
    _this._onClick = function (evt) {
      var _this$props = _this.props,
        onClick = _this$props.onClick,
        selected = _this$props.selected;
      var value = evt.currentTarget.value;
      if (evt.currentTarget.disabled) {
        return;
      }
      if (selected) {
        return onClick && onClick(evt, value);
      }
      _this.setState({
        selected: value
      }, function () {
        return onClick && onClick(evt, value);
      });
    };
    _this._addDividers = function (childrenNodes, disabled) {
      var childrenNodesWithDividers = [];
      var isTransparent = function isTransparent(childNode1, childNode2) {
        return childNode1.props.selected !== childNode2.props.selected;
      };
      for (var i = 0; i < childrenNodes.length - 1; i++) {
        var childNode1 = childrenNodes[i];
        var childNode2 = childrenNodes[i + 1];
        var transparent = isTransparent(childNode1, childNode2);
        var divider = /*#__PURE__*/_react["default"].createElement("div", {
          key: "divider-".concat(i),
          className: (0, _SegmentedToggleSt.st)(_SegmentedToggleSt.classes.divider, {
            disabled: disabled,
            transparent: transparent
          }),
          __self: _this,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 45,
            columnNumber: 9
          }
        });
        childrenNodesWithDividers.push(childNode1, divider);
      }
      var lastChild = childrenNodes[childrenNodes.length - 1];
      childrenNodesWithDividers.push(lastChild);
      return childrenNodesWithDividers;
    };
    return _this;
  }
  (0, _inherits2["default"])(SegmentedToggle, _React$Component);
  return (0, _createClass2["default"])(SegmentedToggle, [{
    key: "render",
    value: function render() {
      var _this2 = this;
      var _this$props2 = this.props,
        dataHook = _this$props2.dataHook,
        children = _this$props2.children,
        disabled = _this$props2.disabled,
        size = _this$props2.size,
        defaultSelected = _this$props2.defaultSelected,
        onClick = _this$props2.onClick,
        selected = _this$props2.selected,
        ariaLabel = _this$props2.ariaLabel,
        ariaLabelledby = _this$props2.ariaLabelledby,
        fullWidth = _this$props2.fullWidth,
        rest = (0, _objectWithoutProperties2["default"])(_this$props2, _excluded);
      var selection = selected || this.state.selected;
      var childrenNodes = _react["default"].Children.map(children, function (child, index) {
        var _child$props$disabled;
        var isDisabled = (_child$props$disabled = child.props.disabled) !== null && _child$props$disabled !== void 0 ? _child$props$disabled : disabled;
        return /*#__PURE__*/_react["default"].cloneElement(child, {
          disabled: isDisabled,
          'data-click': "segmented-toggle-".concat(index + 1),
          'aria-checked': child.props.value === selection,
          role: 'radio',
          onClick: _this2._onClick,
          selected: child.props.value === selection,
          size: size,
          className: (0, _SegmentedToggleSt.st)(_SegmentedToggleSt.classes.toggleItem, {
            selected: child.props.value === selection,
            size: size
          })
        });
      });
      childrenNodes = this._addDividers(childrenNodes, disabled);
      return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, rest, {
        role: "radiogroup",
        "aria-label": ariaLabel,
        "aria-labelledby": ariaLabelledby,
        "data-hook": dataHook,
        "data-size": size,
        className: (0, _SegmentedToggleSt.st)(_SegmentedToggleSt.classes.root, {
          disabled: disabled,
          size: size,
          selected: selected,
          fullWidth: fullWidth
        }),
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 97,
          columnNumber: 7
        }
      }), childrenNodes);
    }
  }]);
}(_react["default"].Component);
SegmentedToggle.displayName = 'SegmentedToggle';
SegmentedToggle.defaultProps = {
  children: [],
  size: 'medium',
  fullWidth: false
};
SegmentedToggle.Button = _ToggleButton["default"];
SegmentedToggle.Icon = _ToggleIcon["default"];
var _default = exports["default"] = SegmentedToggle;