<script lang="ts" setup>
import ToggleOnOff from "@/components/ToggleOnOff.vue";
import Todo from "@/components/Todo.vue"
import BlockedSite from "@/components/BlockedSite.vue"
const currentMenu = ref("main")
const menuLists = [
  "main",
  "completed",
  "blocked sites",
]

const changeMenu = (menu: string) => {
  currentMenu.value = menu
}
</script>

<template>
    <ToggleOnOff />
    <h1>let me focus</h1>
    <ul style="text-align: center;" v-for="menu in menuLists">
        <li>
            <button @click="changeMenu(menu)">[{{ menu }}]</button>
        </li>
    </ul>
    <Todo v-if="currentMenu === 'main'" showInput hoverShowDeleteButton />
    <Todo v-if="currentMenu === 'completed'" showOnlyCompleted showClearAllTodo />
    <BlockedSite v-if="currentMenu === 'blocked sites'" />
    <br/>
    [{{browser.runtime.getManifest().version}}]
</template>

<style scoped>
ul {
    padding: 0;
    display: inline-block;
}

li {
    list-style: none;
    margin: 0px 5px;
}

li button {
    cursor: pointer;
}

.logo {
    height: 6em;
    filter: drop-shadow(0 0 1em #ffffff);
}
</style>
