import React from 'react'
import PropTypes from 'prop-types'

/**
 * On Web we need to include an actual input but hide it.
 */
export const CheckboxInput = React.forwardRef(
  (
    {
      checked,
      defaultChecked,
      disabled = false,
      id,
      isControlled,
      name,
      onChange = () => {},
      value
    },
    ref
  ) => {
    const handleClick = (event) => {
      // Cancel the click dispatched via the label tag, since it's already wrapped
      // in <Pressable>
      event.preventDefault()
      event.stopPropagation()
    }

    return (
      <input
        checked={isControlled ? checked : undefined}
        defaultChecked={isControlled ? undefined : defaultChecked}
        disabled={disabled}
        hidden
        id={id}
        name={name}
        onChange={onChange}
        onClick={handleClick}
        ref={ref}
        type="checkbox"
        value={value}
      />
    )
  }
)
CheckboxInput.displayName = 'CheckboxInput'

CheckboxInput.propTypes = {
  checked: PropTypes.bool,
  defaultChecked: PropTypes.bool,
  disabled: PropTypes.bool,
  id: PropTypes.string.isRequired,
  isControlled: PropTypes.bool.isRequired,
  name: PropTypes.string,
  onChange: PropTypes.func,
  value: PropTypes.string
}