<script lang="ts" setup>
import { TODOS_REPO_KEY } from "@/utils/proxy-service-keys";
import { Todo } from "@/utils/types";
import { createProxyService } from '@webext-core/proxy-service';
import { v4 as uuidv4 } from "uuid"

const todosRepo = createProxyService(TODOS_REPO_KEY);

const props = defineProps<{
  showCompleted?: boolean,
  showOnlyCompleted?: boolean,
  showInput?: boolean,
  hoverShowDeleteButton?: boolean,
  showClearAllTodo?: boolean
}>()

const todos = ref<Todo[]>([]);
const inputNewTodo = ref<string | null>();

const refreshTodo = async () => {
  const allTodos = await todosRepo.getAll();
  todos.value = allTodos.filter(
    (todo: Todo) =>
      (props.showCompleted && todo.completed) ||
      (props.showOnlyCompleted && todo.completed) ||
      (!props.showOnlyCompleted && !todo.completed)
  )
}

onBeforeMount(async () => refreshTodo())

const insertTodo = async () => {
  if (!inputNewTodo.value) return
  if (!inputNewTodo.value.trim()) return
  const generateTodoId = uuidv4()
  await todosRepo.insert({
    id: generateTodoId,
    name: inputNewTodo.value,
    completed: false
  })
  inputNewTodo.value = null
  refreshTodo()
}

const updateTodo = async (todo: Todo) => {
  await todosRepo.update(toRaw(todo))
  refreshTodo()
}

const deleteTodo = async (todo: Todo) => {
  await todosRepo.delete(toRaw(todo))
  refreshTodo()
}

const clearAllCompletedTodo = async () => {
  const allTodos = await todosRepo.getAll()
  const completedTodos = allTodos.filter((todo) => todo.completed)
  const deletePromises = completedTodos.map((todo) => todosRepo.delete(todo))
  await Promise.all(deletePromises)
  refreshTodo()
}
</script>

<template>
    <div class="container">
        <h2 v-if="props.showOnlyCompleted">[completed todos]</h2>
        <h2 v-if="!props.showOnlyCompleted">[todos]</h2>
        <div v-if="showInput" class="form-input">
            <input @keydown.enter="insertTodo" v-model="inputNewTodo" placeholder="playing skateboard at 5am" type="input"/>
            <button @click="insertTodo">[add todo]</button>
        </div>
        <div v-if="showClearAllTodo">
            <button @click="clearAllCompletedTodo">[clear all completed todos]</button>
        </div>
        <br/>
        <div v-if="todos.length === 0">no todos :D</div>
        <ul v-else v-for="todo in todos">
            <li :class="{ completed: todo.completed }" :key="todo.id">
                <label>
                    <input type="checkbox" @change="updateTodo(todo)" v-model="todo.completed" :id="todo.id"/>
                    {{ todo.name }}
                    <button class="button-delete" v-if="props.hoverShowDeleteButton" @click="deleteTodo(todo)">x</button>
                </label>
            </li>
        </ul>
    </div>
</template>

<style scoped>
    .container {
        min-width: 300px;
    }

    ul {
        padding: 0;
    }

    li {
        list-style: none;
        text-align: left;
        font-size: 14pt;
    }

    li label {
        display: block;
    }

    li label:hover {
        cursor: pointer;
    }

    li.completed {
        text-decoration: line-through;
    }

    li .button-delete {
        display: none;
        padding: 1px 4px;
        font-size: 10pt;
        float: right
    }

    li:hover .button-delete {
        display: inline-block;
    }

    .form-input input,
    .form-input button {
        width: 100%;
        padding: 2px 4px;
        margin-bottom: 5px;
    }

    .form-input input {
        font-size: 12pt;
        box-sizing: border-box;
        -webkit-box-sizing:border-box;
        -moz-box-sizing: border-box;
    }
</style>
