const { useState } = React

const Text = () => {
  const [name, setName] = useState('Taro');
  const [age, setAge] = useState('20')

  const handleChangeName = e => setName(e.target.value);
  const handleChangeAge = e => setAge(e.target.value);
    return(
      <>
        <h1>My Name is {name}. I'm {age} years old.</h1>
        <input type="text" value={name} placeholder="Input your name" onChane = {handleChangeName}/>
        <input type="text" value={age} placeholder="Input your age" onChange={handleChangeAge}/>
      </>
    )
}

const RadioButton = () => {
  const [value, setValue] = useState('rock');
  const handleChange = e => setValue(e.target.value);

  return(
    <>
      <h1>Your Favorite Genre</h1>
      <p>I like {value}.</p>

      <label htmlFor="rock">
        Rock
        <input
          id="rock"
          type="radio"
          value="rock"
          onChange={handleChange}
          checked={value === 'rock'}
          />
      </label>

      <label htmlFor="jazz">
        Jazz
        <input
          id="jazz"
          type="radio"
          value="jazz"
          onChange={handleChange}
          checked={value === 'jazz'}
          />
      </label>

      <label htmlFor="classic">
        Classic
        <input
          id="classic"
          type="radio"
          value="classic"
          onChange={handleChange}
          checked={value === 'classic'}
          />
      </label>
    </>
  )
}

const CheckBox = () => {
  
  const [value, setValue] = useState(['javascript']);
  const handleChange = e => {
    if (value.includes(e.target.value)) {
      setValue(value.filter(item => item !== e.target.value));
    } else {
      setValue([...value, e.target.value]);
    }
  }

  return(
    <>
      <h1>Your Favaorite Language</h1>
      <p>I like {value.join(', ')}</p>

      <label htmlFor="php">
        PHP
        <input 
          id="php"
          type="checkbox"
          value="php"
          onChange={handleChange}
          checked={value.includes('php')}
        />
      </label>

      <label htmlFor="golang">
        GO
        <input 
          id="golang"
          type="checkbox"
          value="golang"
          onChange={handleChange}
          checked={value.includes('golang')}
        />
      </label>

      <label htmlFor="javascript">
        JavaScript
        <input 
          id="javascript"
          type="checkbox"
          value="javascript"
          onChange={handleChange}
          checked={value.includes('javascript')}
        />
      </label>

    </>
  )
}

const SelectBox = () => {
  const [value, setValue] = useState('beer');
  const handleChange = e => setValue(e.target.value);

  return(
    <>
      <h1>Your Favaorite Liquor</h1>
      <p>I like {value}</p>
      <select value={value} onChange={handleChange}>
        <option value="beer">Beer</option>
        <option value="wine">Wine</option>
        <option value="whisky">Whisky</option>
      </select>
    </>
  )
}




const App = () => {
  return(
    <>
      <Text />
      <hr />
      <RadioButton />
      <hr />
      <CheckBox />
      <hr />
      <SelectBox />
    </>
  )
 
}

ReactDOM.render(<App />,
document.getElementById("root"))