import {useState} from "../keact/hooks";

export function NamesList() {
  const [namesList, setNamesList] = useState([
    "Greg",
    "Elon",
    "Mark",
    "Olaph"
  ]);

  const [newName, setNewName] = useState("");

  function addNewName() {
    namesList.push(newName);
    setNewName("");
    setNamesList(namesList);
  }

  function deleteName(index: number) {
    namesList.splice(index, 1);
    setNamesList(namesList);
  }

  return <div>
    <h1>Names list:</h1>
    <div>
      {namesList.map((n, i) =>
        <div>
          <span>#{i + 1} - {n}</span><button onClick={deleteName.bind(this, i)}>x</button>
        </div>
      )}
    </div>
    <div>
      <h2>add to list:</h2>
      <input type="text"
             placeholder="Elon"
             value={newName}
             onInput={(e) => {
               //@ts-ignore
               setNewName(e.target.value)
             }}
      />
      <button
        disabled={!newName}
        onClick={addNewName}>add</button>
    </div>
  </div>
}