<script>
    import {todos} from "$lib/stores/todos.js"
    let todo_text = ""
    let addTodo = () => {
        if (todo_text.length > 0) {
            const todo = {
                text: todo_text,
                date: Date.now,
                done: false
            }
            $todos = [todo, ...$todos];
        }
    }
    let clearTodo = (todo) => {
        if(todo.done)
            $todos = $todos.filter(x => x != todo)
        else
            todo.done = true;
            $todos = $todos;
    }
</script>

<div class = "panel">
    <h2 class= "title">
    TODO
    </h2>
    <input bind:value="{todo_text}"/>
    <button on:click="{addTodo}">Add</button>
    <div class = "todo-list">
        {#each $todos as todo}
            <div class = "todo {todo.done ? 'done' : ''}">
                <p>{todo.text}</p>
                <button on:click="{() => clearTodo(todo)}">{todo.done ? '✗' : '✓'}</button>
            </div>
        {/each}
    </div>
</div>

<style>

input {
    padding: 5px;
    margin: 0px;
    border: solid rgb(182, 182, 182) 1px;
    border-radius: 5px;
}

button {
    padding: 5px;
    margin: 0px;
    border: solid rgb(182, 182, 182) 1px;
    border-radius: 5px;
}

.panel {
    background-color: rgb(245, 253, 255);
    padding: 10px;
    border: solid rgb(182, 182, 182) 1px;
    border-radius: 5px;
}

.title {
    padding: 5px;
    margin: 0px;
    margin-left: 5px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: 400;
    font-size: 1.5rem;
}

/* .todo-list {
    padding: 5px;
    background-color: azure;
    display: flex;
    flex-direction: column;
} */

.todo {
    padding: 10px;
    margin: 5px 0px 5px 0px;
    background-color: rgb(255, 255, 255);
    border: solid rgb(182, 182, 182) 1px;
    border-radius: 5px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.done p {
    text-decoration: line-through
}

.todo p {
    padding: 0px;
    margin: 0px 10px 0px 0px;
}

.todo button {
    margin-left: auto;
}

</style>