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

import { Icon } from '@swrve/icons'

const Checkbox = ({ checked, theme, className, onChange, disabled }) => {
  const customCheckboxStyles = classnames(
    'sw-checkbox',
    { 'bg-cloudWhite': !checked },
    { [`text-${theme}-100 bg-${theme}-100`]: checked },
    className
  )

  const handleKeyPress = e => {
    if (e.keyCode === 13) {
      onChange(e)
    }
  }

  return (
    <React.Fragment>
      <input
        type="checkbox"
        className="hidden-input"
        onChange={onChange}
        onKeyDown={handleKeyPress}
        checked={checked}
        disabled={disabled}
      />
      <span className={customCheckboxStyles}>
        <Icon name="tick" className="text-cloudWhite opacity-0" />
      </span>
    </React.Fragment>
  )
}

Checkbox.propTypes = {
  /** Determine wether 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 border style */
  theme: oneOf(['primary', 'secondary']).isRequired
}

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

export default Checkbox