import { createElement, useState } from '__RAX_OR_REACT__';
import { string, func, any } from 'prop-types';
import * as types from './prop-types';
import Radio from './Radio';

function convertValue(value, type) {
  switch (type) {
    case 'number':
      return Number(value);

    case 'boolean':
      return value === 'true'
        ? true
        : value === 'false'
        ? false
        : console.error(`'${value}' type error: ${type}`);
    default:
      return value;
  }
}

function RadioGroup(props) {
  const { title, name, options, defaultValue, onChange } = props;

  const [value, setValue] = useState(
    String(
      defaultValue !== undefined ? defaultValue : options[0] && options[0].value
    )
  );

  const mOptions = options.map(({ value: val, ...rest }) => {
    return {
      name,
      type: typeof val,
      value: String(val),
      checked: String(value) === String(val),
      ...rest,
    };
  });

  function handleChange(val) {
    val = convertValue(val, mOptions.find(({ value }) => value === val).type);
    setValue(val);
    onChange(name, val);
  }

  return (
    <div key={name} className='radio-group'>
      <label>{title || name}:</label>
      <div className='radio-items'>
        {mOptions.map((buttonProps, index) => {
          return (
            <Radio
              key={index}
              name={name}
              {...buttonProps}
              onChange={handleChange}
            />
          );
        })}
      </div>
    </div>
  );
}

RadioGroup.propTypes = {
  title: string,
  name: string.isRequired,
  options: types.Options,
  defaultValue: any,
  onChange: func,
};

export default RadioGroup;