import { Form, Radio as AntRadio } from 'antd';
import { ElementStatus } from 'types/elements';

const Radio = ({
  value,
  setCurrentValue,
  status,
  validateStatus,
  message,
  options,
  style,
  ...props
}) => {
  return (
    <Form.Item validateStatus={validateStatus} help={message}>
      <AntRadio.Group
        {...props}
        disabled={status === ElementStatus.Disabled}
        buttonStyle={style === 'button' && 'solid'}
        value={value}
        onChange={e => {
          if (e && e.target) setCurrentValue(e.target.value);
        }}
      >
        {options.map((option, i) => {
          if (style === 'button') {
            return (
              <AntRadio.Button key={i} value={option.value || ''} {...option}>
                {option.name}
              </AntRadio.Button>
            );
          }
          return (
            <AntRadio
              key={i}
              value={option.value || ''}
              style={styles.radio}
              {...option}
            >
              {option.name}
            </AntRadio>
          );
        })}
      </AntRadio.Group>
    </Form.Item>
  );
};

const styles = {
  radio: {
    display: 'block',
  },
};

export default Radio;
