import React from 'react'
import classnames from 'classnames'
import { bool, func, object, oneOf, oneOfType, string } from 'prop-types'

const RadioButton = ({ checked, disabled, className, onChange, theme, value }) => {
  const radioBorderStyles = classnames(
    'sw-radio-border',
    { 'bg-cloudWhite': !checked },
    { [`text-${theme}-100 border-${theme}-100`]: checked },
    className
  )

  const radioButtonStyles = classnames(
    'sw-radio-button',
    { 'bg-cloudWhite': !checked },
    { [`text-${theme}-100 bg-${theme}-100`]: checked }
  )

  return (
    <React.Fragment>
      <input
        type="radio"
        className="hidden-input"
        onChange={onChange}
        checked={checked}
        disabled={disabled}
        value={value}
      />
      <span className={radioBorderStyles}>
        <span className={classnames(radioButtonStyles)} />
      </span>
    </React.Fragment>
  )
}

RadioButton.propTypes = {
  /** Determine whether or not checkbox is checked */
  checked: bool,
  /** Extra css classes to extend from external */
  className: oneOfType([string, object]),
  /** Determine wether or not checkbox is disabled */
  disabled: bool,
  /** Checkbox onchange handler */
  onChange: func.isRequired,
  /** Determines the colours */
  theme: oneOf(['primary', 'secondary']).isRequired,
  /** Value for radio button */
  value: string
}

RadioButton.defaultProps = {
  checked: false,
  className: '',
  disabled: false,
  theme: 'secondary',
  onChange: () => {}
}

export default RadioButton