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

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

class Radio extends React.PureComponent {
  render() {
    const {
      checked,
      label,
      className,
      id,
      value,
      name,
      onClick,
    } = this.props;

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

Radio.propTypes = {
  checked: bool,
  id: string.isRequired,
  value: string.isRequired,
  name: string,
  label: string,
  className: string,
  onClick: func.isRequired,
};

Radio.defaultProps = {
  checked: undefined,
  name: undefined,
  label: undefined,
  className: '',
};

export default Radio;
