import * as React from 'https://cdn.skypack.dev/react@17.0.1';
import * as ReactDOM from 'https://cdn.skypack.dev/react-dom@17.0.1';
ReactDOM.render(<TodoList />, document.getElementById('react-app'));

// A fairly simple component describing a task text string and a button:
function Todo({ text, onCrossClick }) { // Based on the received data ("props") text and onCrossClick...
  return ( // ...displays an li tag with the task text and a button that, when clicked, triggers the received function
    <li>{text} <button onClick={onCrossClick}>╳</button></li>
  );
}

// A complex component describing the entire task list and utilizing the Todo component internally:
function TodoList() {
// Functions describing the current state (text, items) of data and providing a way to modify them (setText, setItems)
// Here, we also set the initial state of the component: an empty input and one task in the list: "Add another task"
  const [text, setText] = React.useState('');
  const [items, setItems] = React.useState([{ text: 'Add another task', id: 42 }]);

  // Functions describing how user actions modify the data
  // Notice how little code there is: we only describe data manipulation, not markup
  const onTextChange = e => setText(e.target.value);
  const addItem = text => setItems(items.concat({ text, id: Math.random() }));
  const removeItem = id => setItems(items.filter(item => item.id != id));
  const createTodo = e => {
    if (e.key !== 'Enter' || !text) return;
    addItem(e.target.value);
    setText('');
  };

  // Description of what the component consists of and how our data can affect it in JSX language
  // It allows the use of curly braces to insert JS code directly into HTML markup
  return (
    <section>
      <input
        value={text}
        onChange={onTextChange}
        onKeyDown={createTodo}
        placeholder="add on Enter"
      />

      {items.length > 0 // Ternary operator: if there are tasks, return the code after "?", otherwise -- after ":"
        ? <ul>
            {items.map(({ id, text }) => // Using the .map array method, we create a Todo component for each task.
              <Todo key={id} text={text} onCrossClick={() => removeItem(id)}/>
            )}
          </ul>
        : <div>No tasks</div>
      }
    </section>
  );
}