import React from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
import './RadioGroup.less'

const Radio = {}

function RadioGroup({ className, options, name, onChange, value, disabled }) {
  return (
    <div className={`demio-radio-group ${className}`}>
      {options.map(({ label, ...option }) => (
        <RadioButton
          // eslint-disable-next-line react/jsx-props-no-spreading
          {...option}
          name={name}
          onChange={onChange}
          checked={value === option?.value}
          disabled={disabled}>
          {label}
        </RadioButton>
      ))}
    </div>
  )
}

RadioGroup.propTypes = {
  className: PropTypes.string,
  options: PropTypes.arrayOf(
    PropTypes.shape({
      className: PropTypes.string,
      name: PropTypes.string.isRequired,
      onChange: PropTypes.func.isRequired,
      value: PropTypes.string.isRequired,
      id: PropTypes.string.isRequired,
      checked: PropTypes.bool.isRequired,
      children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
      disabled: PropTypes.bool,
    })
  ).isRequired,
  name: PropTypes.string.isRequired,
  onChange: PropTypes.func.isRequired,
  value: PropTypes.string.isRequired,
  disabled: PropTypes.bool,
}

RadioGroup.defaultProps = {
  className: '',
  disabled: false,
}

function RadioButton({ id, className, onChange, value, name, checked, children, disabled }) {
  return (
    <label
      htmlFor={id}
      className={classNames('demio-radio-button', {
        [className]: !!className,
        'demio-radio-button_active': checked,
        'demio-radio-button_disabled': disabled,
      })}>
      <input
        id={id}
        onChange={onChange}
        name={name}
        value={value}
        type="radio"
        checked={checked}
        disabled={disabled}
      />
      <span>{children}</span>
    </label>
  )
}

RadioButton.propTypes = {
  className: PropTypes.string,
  name: PropTypes.string.isRequired,
  onChange: PropTypes.func.isRequired,
  value: PropTypes.string.isRequired,
  id: PropTypes.string.isRequired,
  checked: PropTypes.bool.isRequired,
  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
  disabled: PropTypes.bool,
}

RadioButton.defaultProps = {
  className: '',
  disabled: false,
}

Radio.Group = RadioGroup
Radio.Button = RadioButton

export default Radio