todos

load core::zsx::*;

struct Todo {
  task: str,
  delete: bool,
}

fun todo(task: str, delete: bool, on_click: Fn()) -> </> {
  return <li class="list-group-item">
    {task}
    <input type="checkbox" checked={delete} @change={on_click} />
  </li>;
}

fun prompt(on_click: Fn(), on_input: Fn(Event)) -> </> {
  return <>
    <button type="button" @click={on_click}>Add</button>
    <input type="text" @input={on_input} />
  </>;
}

fun main() {
  mut todos: []Todo = [];
  mut text: str = "";

  imu on_input: Fn(Event) = fn(event) => text = event.value;
  imu add: Fn() = fn() => todos.push(Todo { task = text, delete = false });

  imu app: </> ::= <>
    <fieldset>
      <legend>Todo List:</legend>
      <ul>
        {
          todos.map(fn(todo, index) => <todo
            task={todo.task}
            delete={todo.delete}
            on_click={fn() => todos.remove(index)}>
          </todo>)
        }
      </ul>
    </fieldset>
    <prompt on_click={add} on_input={on_input} />
  </>;

  #render app;
}