import React, {useEffect} from 'react'

import styles from './styles.module.css'

export default function Checkbox({label, error, hint, name, value, onChange, onBlur, isValid}){
  const handleCheck = ev => {
    onChange({target: {value: !value}})
  }

  useEffect(()=>{
    if(value === "")
      onChange({target: {value: false}})
  }, [])

  return (
    <div className={styles.formElementContainer + ' ' + styles.checkboxContainer}>
      <label htmlFor={name}>{label}:</label>

      <div className={styles.complexInput + ((isValid && !error)?'':' ' + styles.invalid)}>
        <input type="checkbox" checked={value} className={(isValid && !error)?'':styles.invalid} name={name} onChange={handleCheck} onBlur={onBlur} />
        <label onClick={handleCheck} htmlFor={name}>{hint}</label>
      </div>
      {error && <span className={styles.hint}>{error || ''}</span>}
    </div>
  )
}