import { useEffect, useState } from "https://esm.sh/react";
import ReactDOM from "https://esm.sh/react-dom";

// Input component
function Input({name, profile, setProfile}) {
   const handleChangeEvent = (e) => {
    const { name, value } = e.target;
    // profile[name] = value; // mutating update
    setProfile(prev => ({
      ...prev,
      [name]: value
    })) // immutating update
  };
  return (
    <>
      <label for={name}>{name}: </label>
      <input value={profile[name]} name={name} type="text" onChange={handleChangeEvent}/>
      <br /><br />
    </>
  )
}

// Button component
function Button({action, profile, setProfile}) {
  const handleClickEvent = (action) => {
    if (action === 'clear') {
      setProfile(prev => ({
        ...prev,
        hobby: ''
      })) // immutating update
    }
    if (action === 'add' || action === 'delete') {
      setProfile(prev => ({
        ...prev,
        hobby: '',
        hobbyList: action === 'add'
          ? [...prev.hobbyList, profile.hobby] : []
      })) // immutating update
    }
  }
  return (
    <button onClick={() => handleClickEvent(action)} disabled={action !== 'delete' && !profile.hobby}>{action} hobby</button>
  )
}

// parent component
function App() {
  const [profile, setProfile] = useState({
    name: 'Jamie', age: 33, hobby: 'dancing', hobbyList: ['drawing', 'cooking']
  });

  return (<div>
      <h1>Profile Edit</h1>
      <Input name="name" profile={profile} setProfile={setProfile}  />
      <Input name="age" profile={profile} setProfile={setProfile}  />
      <Input name="hobby" profile={profile} setProfile={setProfile}  />
      <Button action="add" profile={profile} setProfile={setProfile}/>
      <Button action="clear" profile={profile} setProfile={setProfile}/>
      <br /><br />
      <select name="hobbylist" multiple>
        {profile.hobbyList.map(option => (<option>{option}</option>))}
      </select>
      <Button action="delete" profile={profile} setProfile={setProfile}/>
      <br /><br />
      <hr />
      <h2>Profile checking</h2>
      <p>
        Your name: {profile.name}
        <br />
        Your age: {profile.age}
        <br />
        Your hobbies: {profile.hobbyList.join(', ')}
      </p>
  </div>)
}

ReactDOM.render(<App />, document.querySelector("#app"));