"use strict";

exports.__esModule = true;
exports.default = void 0;

require("core-js/modules/es6.function.name");

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _ = require("./..");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

/**
 * @category controls
 * @component radio
 * @variations collab-ui-react
 */
var Radio = function Radio(props) {
  var disabled = props.disabled,
      required = props.required,
      checked = props.checked,
      name = props.name,
      label = props.label,
      value = props.value,
      inputRef = props.inputRef,
      htmlId = props.htmlId,
      onChange = props.onChange,
      children = props.children,
      className = props.className,
      nestedLevel = props.nestedLevel;
  return _react.default.createElement("div", {
    className: 'cui-input-group cui-radio' + ("" + (nestedLevel && " cui-input--nested-" + nestedLevel || '')) + (" " + className)
  }, _react.default.createElement("input", {
    className: 'cui-input cui-radio__input',
    type: "radio",
    ref: inputRef,
    disabled: disabled,
    checked: checked,
    required: required,
    name: name,
    value: value,
    id: htmlId,
    onChange: onChange,
    tabIndex: 0
  }), _react.default.createElement(_.Label, {
    className: "cui-radio__label",
    label: label,
    htmlFor: htmlId
  }), children);
};

Radio.propTypes = {
  /** @prop Boolean for whether the Radio button is checked | false */
  checked: _propTypes.default.bool,

  /** @prop Children nodes to render insdie Radio component | null */
  children: _propTypes.default.node,

  /** @prop Optional CSS class name | '' */
  className: _propTypes.default.string,

  /** @prop Sets the attribute disabled to the Radio | false */
  disabled: _propTypes.default.bool,

  /** @prop Unique HTML ID used for tying label to HTML input for automated testing */
  htmlId: _propTypes.default.string.isRequired,

  /** @prop Optional ref attribute for Radio input element | null */
  inputRef: _propTypes.default.func,

  /** @prop Radio label text | '' */
  label: _propTypes.default.string,

  /** @prop Radio name string | '' */
  name: _propTypes.default.string,

  /** @prop Set the level of nested Radios | 0 */
  nestedLevel: _propTypes.default.number,

  /** @prop Callback function invoked when user makes a change with the Radio button | null */
  onChange: _propTypes.default.func,

  /** @prop Requires the user to populate the Radio input | false */
  required: _propTypes.default.bool,

  /** @prop String value that corresponds with Radio button | '' */
  value: _propTypes.default.string
};
Radio.defaultProps = {
  checked: false,
  children: null,
  className: '',
  disabled: false,
  inputRef: null,
  label: '',
  name: '',
  nestedLevel: 0,
  onChange: function onChange() {},
  required: false,
  value: ''
};
Radio.displayName = 'Radio';
var _default = Radio;
/**
* @component radio
* @section default
* @react

import {
  Radio,
  RadioGroup,
} from '@collab-ui/react';

export default class DefaultRadio extends React.Component {
  render() {
    return (
      <RadioGroup>
        <Radio
          value='me'
          label='me'
          htmlId='testCheckbox1'
          onChange={()=>{}}
          inputRef={ref=>this.input=ref}
        />
        <Radio
          value='you'
          label='you'
          htmlId='testCheckbox2'
          onChange={()=>{}}
        />
        <Radio
          value='us'
          label='us'
          htmlId='testCheckbox3'
          onChange={()=>{}}
        />
      </RadioGroup>
    )
  }
}
**/

/**
* @component radio
* @section disabled
* @react
import { Radio } from '@collab-ui/react';

export default function DisabledRadio() {
  return (
    <Radio
      value='disabledRadio'
      label='Disabled Radio'
      htmlId='disabledRadio'
      disabled
      onChange={()=>{}}
    />
  );
}
**/

/**
* @component radio
* @section nested
* @react
import { Radio } from '@collab-ui/react';

export default class RadioNested extends React.PureComponent {
  state = {
    value: 'parent'
  }

  render() {
    return (
      <span>
        <Radio
          value='parent'
          label='Parent Radio Example'
          htmlId='parentRadio'
          name='nestedRadios'
          checked={this.state.value === 'parent'}
          onChange={() => this.setState({ value: 'parent' })}
          key='child-0'
        />
        <Radio
          value='child1'
          label='Child Radio Nested 1 Level'
          htmlId='childRadio1'
          name='nestedRadios'
          nestedLevel={1}
          checked={this.state.value === 'child1'}
          onChange={() => this.setState({ value: 'child1' })}
          key='child-1'
        />
        <Radio
          value='child2'
          label='Child Radio Nested 2 Level'
          htmlId='childRadio2'
          name='nestedRadios'
          nestedLevel={2}
          checked={this.state.value === 'child2'}
          onChange={() => this.setState({ value: 'child2' })}
          key='child-2'
        />
        <Radio
          value='child3'
          label='Child Radio Nested 3 Level'
          htmlId='childRadio3'
          name='nestedRadios'
          nestedLevel={3}
          checked={this.state.value === 'child3'}
          onChange={() => this.setState({ value: 'child3' })}
          key='child-3'
        />
      </span>
    );
  }
}
**/

exports.default = _default;