"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _uniqueId = _interopRequireDefault(require("lodash/uniqueId"));
var _Radio = _interopRequireDefault(require("../Radio/Radio"));
var _RadioGroupSt = require("./RadioGroup.st.css.js");
var _constants = require("./constants");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/RadioGroup/RadioGroup.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
/**
 * component for easy radio group creation.
 *
 * similar to HTML `<input type="radio"/>` except you don't need to handle `name` or click handlers
 */
class RadioGroup extends _react.default.PureComponent {
  constructor() {
    super(...arguments);
    this.uniqueName = (0, _uniqueId.default)('RadioGroup_');
  }
  _getSpacing(index) {
    var {
      display: orientation,
      spacing,
      fullWidth
    } = this.props;
    if (index > 0) {
      if (orientation === 'vertical') {
        return {
          marginTop: spacing
        };
      }
      if (orientation === 'horizontal' && !fullWidth) {
        return {
          marginInlineStart: spacing
        };
      }
    }
    return {};
  }
  render() {
    var _this$props$children, _this$props$spacing, _this$props;
    var {
      dataHook,
      className,
      name,
      onChange: _onChange = () => {},
      disabledRadios = [],
      value,
      vAlign,
      display: orientation,
      selectionArea,
      selectionAreaSkin,
      selectionAreaPadding,
      fullWidth,
      size
    } = this.props;
    var uniqueName = name || this.uniqueName;
    return /*#__PURE__*/_react.default.createElement("div", {
      role: "radiogroup",
      "data-hook": dataHook,
      className: (0, _RadioGroupSt.st)(_RadioGroupSt.classes.root, {
        orientation,
        fullWidth,
        size
      }, className),
      "data-display": orientation,
      style: fullWidth && orientation === 'horizontal' ? {
        // @ts-expect-error
        gridTemplateColumns: "repeat(".concat((_this$props$children = this.props.children) == null ? void 0 : _this$props$children.length, ", 1fr)"),
        columnGap: (_this$props$spacing = (_this$props = this.props) == null ? void 0 : _this$props.spacing) !== null && _this$props$spacing !== void 0 ? _this$props$spacing : '6px'
      } : undefined,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 63,
        columnNumber: 7
      }
    }, _react.default.Children.map(this.props.children, (radio, index) => {
      if (!radio || ! /*#__PURE__*/(0, _react.isValidElement)(radio)) {
        return radio;
      }
      var checked = radio.props.value === value;
      var radioName = radio.props.name || uniqueName;
      var disabled = this.props.disabled || disabledRadios.indexOf(radio.props.value) !== -1;
      var radioDataHook = "".concat(_constants.dataHooks.RadioContainer, "-").concat(radio.props.value);
      return /*#__PURE__*/_react.default.createElement("div", {
        className: (0, _RadioGroupSt.st)(_RadioGroupSt.classes.optionContainer, {
          selectionArea,
          selectionAreaSkin,
          checked,
          disabled
        }),
        "data-hook": _constants.dataHooks.RadioOptionContainer,
        style: this._getSpacing(index),
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 99,
          columnNumber: 13
        }
      }, /*#__PURE__*/_react.default.createElement("div", {
        className: _RadioGroupSt.classes.radioContainer,
        "data-hook": radioDataHook,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 109,
          columnNumber: 15
        }
      }, /*#__PURE__*/_react.default.createElement(_Radio.default, {
        style: {
          minHeight: '24px',
          padding: selectionAreaPadding
        },
        className: _RadioGroupSt.classes.radio,
        dataHook: radio.props.dataHook,
        value: radio.props.value,
        name: radioName,
        id: "".concat(radioName, "_").concat(index),
        onChange: () => _onChange(radio.props.value),
        onMouseEnter: radio.props.onMouseEnter,
        onMouseLeave: radio.props.onMouseLeave,
        alignItems: vAlign,
        disabled: disabled,
        checked: checked,
        label: radio.props.children,
        size: size,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 110,
          columnNumber: 17
        }
      })), radio.props.content && /*#__PURE__*/_react.default.createElement("div", {
        className: _RadioGroupSt.classes.content,
        "data-hook": _constants.dataHooks.RadioContent,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 132,
          columnNumber: 17
        }
      }, radio.props.content));
    }));
  }
}
RadioGroup.Radio = _Radio.default;
RadioGroup.displayName = 'RadioGroup';
RadioGroup.defaultProps = {
  disabledRadios: [],
  onChange: () => {},
  value: '',
  vAlign: 'center',
  display: 'vertical',
  selectionArea: 'none',
  selectionAreaSkin: 'filled',
  fullWidth: false,
  size: 'medium'
};
var _default = exports.default = RadioGroup;
//# sourceMappingURL=RadioGroup.js.map