import { h, render } from "preact"
import { signal, computed } from "preact/signals";

const todos = signal([
  { text: "Write my first post", completed: true },
  { text: "Buy new groceries", completed: false },
  { text: "Walk the dog", completed: false },
]);

const completedCount = computed(() => {
  return todos.value.filter(todo => todo.completed).length;
});

const newItem = signal("");

function addTodo() {
  todos.value = [...todos.value, { text: newItem.value, completed: false }];
  newItem.value = ""; // Reset input value on add
}

function removeTodo(index) {
  todos.value.splice(index, 1)
  todos.value = [...todos.value];
}

const TodoList = () => {
  const onInput = event => {
      (newItem.value = event.target.value);
  }

  return <div class="bg-white">
      <div class="flex-row content-center" style={{alignItems:"Center"}}>
        <textfield class="m-1" text={newItem.value} onInput={onInput} label="Task" />
        <button style={{height:40}} onClick={addTodo} text="Add"/>
      </div>
      <ul>
        {todos.value.map((todo, index) => {
          return (
            <li>
                <div class="flex-row">
              <toggle
                value={todo.completed}
                onValueChanged={() => {
                  todo.completed = !todo.completed
                  todos.value = [...todos.value];
                }}
              />
              {todo.completed ? <s>{todo.text}</s> : todo.text}{' '}
              <button onClick={() => removeTodo(index)} text="❌"/>
              </div>
            </li>
          );
        })}
      </ul>
      <p>Completed count: {completedCount.value}</p>
      </div>
}

render(<TodoList />, document.body);