import React from 'react';
import { bool, string, shape } from 'prop-types';

import {
  RADIO_WRAP_CLASSNAME,
  RADIO_STYLED_CLASSNAME,
  LABEL_CLASSNAME,
  Wrap,
  Label,
  RadioWrap,
  RadioField,
  RadioLabel,
  RadioStyled,
} from '../shared';

class RadioRF extends React.PureComponent {
  render() {
    const { isDisabled, valuePassed, input, label, className } = this.props;
    const { checked, name } = input;

    return (
      <Wrap isDisabled={isDisabled} className={`${className} ${RADIO_WRAP_CLASSNAME}`}>
        {label && <Label htmlFor={valuePassed} isActive={checked} className={LABEL_CLASSNAME}>{label}</Label>}
        <RadioWrap>
          <RadioField {...input} type="radio" id={valuePassed} name={name} value={valuePassed} />
          <RadioLabel htmlFor={valuePassed} />
          <RadioStyled className={RADIO_STYLED_CLASSNAME} />
        </RadioWrap>
      </Wrap>
    );
  }
}

RadioRF.propTypes = {
  isDisabled: bool,
  valuePassed: string.isRequired,
  input: shape({}).isRequired,
  label: string,
  className: string,
};

RadioRF.defaultProps = {
  isDisabled: false,
  label: undefined,
  className: '',
};

export default RadioRF;
