{"size": 1361, "ext": "js", "max_stars_repo_path": "client/components/CompeteView/ExerciseCloze.js", "max_stars_repo_name": "ilmarikyl/mobvita", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "client/components/CompeteView/ExerciseCloze.js", "max_issues_repo_name": "ilmarikyl/mobvita", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "client/components/CompeteView/ExerciseCloze.js", "max_forks_repo_name": "ilmarikyl/mobvita", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 25.2037037037, "max_line_length": 96, "alphanum_fraction": 0.5848640705}
import React, { useState, useEffect } from 'react'

import { Input, Icon } from 'semantic-ui-react'

const ExerciseCloze = ({ word, handleChange, handleClick, value }) => {
  const [color, setColor] = useState('lightyellow')
  const [touched, setTouched] = useState(false)
  const [disabled, setDisabled] = useState(false)
  const { isWrong, tested } = word

  const clickVolume = () => handleClick(word.base || word.bases, word.lemmas)

  const changeValue = (e) => {
    if (!touched) {
      setTouched(true)
      setColor('white')
    }
    handleChange(e, word)
  }

  useEffect(() => {
    if (tested) {
      if (isWrong) {
        setColor('red')
      } else {
        setColor('green')
        setDisabled(true)
      }
    }
  }, [tested])

  return (
    <Input
      disabled={disabled}
      key={word.ID}
      icon={<Icon name="volume up" link onClick={clickVolume} style={{ marginRight: '4px' }} />}
      placeholder={`${word.base || word.bases}`}
      value={value}
      onChange={changeValue}
      transparent
      style={{
        minWidth: `${Math.floor(word.base ? word.base.length : word.bases.length)}em`,
        width: `${Math.floor(word.surface.length + 1)}em`,
        marginRight: '2px',
        height: '1.5em',
        borderRadius: '6px',
        backgroundColor: color,
      }}
    />
  )
}

export default ExerciseCloze
