import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["className", "children", "color", "direction", "disabled", "errorMessage", "invalid", "name", "required", "value", "onChange", "aria-labelledby", "aria-describedby"];
import * as React from 'react';
import classNames from 'classnames';
import { RadioContext } from './useRadioContext';
import ErrorMessage from '../ErrorMessage';

var RadioGroup = function RadioGroup(_ref) {
  var className = _ref.className,
      children = _ref.children,
      color = _ref.color,
      _ref$direction = _ref.direction,
      direction = _ref$direction === void 0 ? 'column' : _ref$direction,
      disabled = _ref.disabled,
      errorMessage = _ref.errorMessage,
      invalid = _ref.invalid,
      name = _ref.name,
      required = _ref.required,
      value = _ref.value,
      onChange = _ref.onChange,
      ariaLabelledBy = _ref['aria-labelledby'],
      ariaDescribedBy = _ref['aria-describedby'],
      props = _objectWithoutProperties(_ref, _excluded);

  var _React$useRef = React.useRef(value),
      initialValue = _React$useRef.current;

  var _React$useState = React.useState(value || null),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      selectedValue = _React$useState2[0],
      setSelectedValue = _React$useState2[1];

  var _React$useState3 = React.useState(null),
      _React$useState4 = _slicedToArray(_React$useState3, 2),
      lastFocusedValue = _React$useState4[0],
      setLastFocusedValue = _React$useState4[1];

  var radioGroupClass = classNames('sg-radio-group', className);
  var radioGroupItemsClass = classNames('sg-radio-group__items', _defineProperty({}, "sg-radio-group__items--direction-".concat(String(direction)), direction));
  var errorTextId = name ? "".concat(name, "-errorText") : undefined;

  var _React$useState5 = React.useState(true),
      _React$useState6 = _slicedToArray(_React$useState5, 2),
      isPristine = _React$useState6[0],
      setIsPristine = _React$useState6[1]; // If value passed to RadioGroup changes, update the selectedValue


  React.useEffect(function () {
    setSelectedValue(value !== null && value !== void 0 ? value : null);
  }, [value]); // If selectedValue changes set isPristine to false

  React.useEffect(function () {
    if (selectedValue !== initialValue && isPristine) setIsPristine(false);
  }, [selectedValue, initialValue, isPristine]);

  var updateValue = function updateValue(event, value) {
    setSelectedValue(value);
    if (onChange) onChange(event);
  };

  var describedbyIds = React.useMemo(function () {
    var ids = [];

    if (invalid && errorMessage) {
      ids.push(errorTextId);
    }

    if (ariaDescribedBy) {
      ids.push(ariaDescribedBy);
    }

    return ids.join(' ');
  }, [errorTextId, invalid, errorMessage, ariaDescribedBy]);
  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
    className: radioGroupClass,
    role: "radiogroup" // @ts-ignore ts migration
    ,
    disabled: disabled,
    onBlur: function onBlur() {
      return setLastFocusedValue(null);
    },
    "aria-required": required,
    "aria-labelledby": ariaLabelledBy,
    "aria-describedby": describedbyIds.length ? describedbyIds : undefined
  }), /*#__PURE__*/React.createElement("div", {
    className: radioGroupItemsClass
  }, /*#__PURE__*/React.createElement(RadioContext.Provider, {
    value: {
      color: color,
      name: name,
      disabled: disabled,
      invalid: invalid,
      selectedValue: selectedValue,
      setSelectedValue: updateValue,
      lastFocusedValue: lastFocusedValue,
      setLastFocusedValue: setLastFocusedValue,
      isPristine: isPristine
    }
  }, children)), invalid && errorMessage && /*#__PURE__*/React.createElement(ErrorMessage, {
    id: errorTextId,
    color: color === 'light' ? 'text-red-40' : undefined
  }, errorMessage));
};

export default RadioGroup;