import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectSpread from "@babel/runtime/helpers/objectSpread";

/**
 * Web RadioGroup Component
 *
 */
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { extendPropsWithContext, registerElement, validateDOMAttributes, dispatchCustomElementEvent } from '../../shared/component-helper';
import FormRow from '../form-row/FormRow';
import FormStatus from '../form-status/FormStatus';
import Context from '../../shared/Context';
import RadioGroupContext from './RadioGroupContext';
const renderProps = {
  on_change: null
};
export const propTypes = {
  label: PropTypes.string,
  title: PropTypes.string,
  disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
  id: PropTypes.string,
  name: PropTypes.string,
  status: PropTypes.string,
  status_state: PropTypes.string,
  status_animation: PropTypes.string,
  layout_direction: PropTypes.oneOf(['column', 'row']),
  direction: PropTypes.oneOf(['horizontal', 'vertical']),
  vertical: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
  value: PropTypes.string,
  attributes: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
  class: PropTypes.string,
  /// React props
  className: PropTypes.string,
  children: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node]),
  // Web Component props
  custom_element: PropTypes.object,
  custom_method: PropTypes.func,
  on_change: PropTypes.func
};
export const defaultProps = _objectSpread({
  label: null,
  title: null,
  disabled: null,
  id: null,
  name: null,
  status: null,
  status_state: 'error',
  status_animation: null,
  direction: 'horizontal',
  vertical: null,
  layout_direction: 'row',
  value: null,
  attributes: null,
  class: null,
  // React props
  className: null,
  children: null,
  // Web Component props
  custom_element: null,
  custom_method: null
}, renderProps);
/**
 * The radio component is our enhancement of the classic radio button. It acts like a radio. Example: On/off, yes/no.
 */

export default class RadioGroup extends PureComponent {
  static enableWebComponent() {
    registerElement(RadioGroup.tagName, RadioGroup, defaultProps);
  }

  static getDerivedStateFromProps(props, state) {
    if (state._listenForPropChanges) {
      if (typeof props.value !== 'undefined') {
        state.value = props.value;
      }
    }

    state._listenForPropChanges = true;
    return state;
  }

  constructor(props) {
    super(props);

    _defineProperty(this, "onChangeHandler", (_ref) => {
      let {
        value,
        event
      } = _ref;
      this.setState({
        value,
        _listenForPropChanges: false
      });
      dispatchCustomElementEvent(this, 'on_change', {
        value,
        event
      });
    });

    this._refInput = React.createRef();
    this._id = props.id || "dnb-radio-group-".concat(Math.round(Math.random() * 999)); // cause we need an id anyway

    this._name = props.name || "dnb-radio-group-".concat(Math.round(Math.random() * 999)); // cause we need an id anyway

    this.state = {
      _listenForPropChanges: true
    };
  }

  render() {
    // consume the formRow context
    const props = this.context.formRow ? // use only the props from context, who are available here anyway
    extendPropsWithContext(this.props, this.context.formRow) : this.props;

    const {
      status,
      status_state,
      status_animation,
      direction,
      vertical,
      layout_direction,
      label,
      disabled,
      className,
      class: _className,
      id: _id,
      // eslint-disable-line
      name: _name,
      // eslint-disable-line
      value: _value,
      // eslint-disable-line
      attributes,
      // eslint-disable-line
      children,
      // eslint-disable-line
      on_change,
      // eslint-disable-line
      custom_method,
      // eslint-disable-line
      custom_element
    } = props,
          rest = _objectWithoutProperties(props, ["status", "status_state", "status_animation", "direction", "vertical", "layout_direction", "label", "disabled", "className", "class", "id", "name", "value", "attributes", "children", "on_change", "custom_method", "custom_element"]);

    const {
      value
    } = this.state;
    const id = this._id;
    const showStatus = status && status !== 'error';
    const classes = classnames('dnb-radio-group', status && "dnb-radio-group__status--".concat(status_state), "dnb-radio-group--".concat(layout_direction), className, _className);

    const params = _objectSpread({}, rest);

    if (showStatus) {
      params['aria-describedby'] = id + '-status';
    }

    if (label) {
      params['aria-labelledby'] = id + '-label';
    } // also used for code markup simulation


    validateDOMAttributes(this.props, params);
    const context = {
      name: this._name,
      value,
      disabled,
      onChange: this.onChangeHandler
    };
    const formRowParams = {
      label,
      label_id: id,
      // send the id along, so the FormRow component can use it
      direction,
      vertical,
      disabled // status,
      // status_state

    };
    return React.createElement(RadioGroupContext.Provider, {
      value: context
    }, React.createElement("span", {
      className: classes
    }, React.createElement(FormRow, formRowParams, React.createElement("span", _extends({
      id: id,
      className: "dnb-radio-group__shell",
      role: "radiogroup"
    }, params), children, showStatus && React.createElement(FormStatus, {
      text: status,
      status: status_state,
      text_id: id + '-status' // used for "aria-describedby"
      ,
      animation: status_animation
    })))));
  }

}

_defineProperty(RadioGroup, "tagName", 'dnb-radio-group');

_defineProperty(RadioGroup, "defaultProps", defaultProps);

_defineProperty(RadioGroup, "renderProps", renderProps);

_defineProperty(RadioGroup, "contextType", Context);

_defineProperty(RadioGroup, "parseChecked", state => /true|on/.test(String(state)));

RadioGroup.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};