<template>
    <main class="directory layout-block">
        <category-row
            v-for="(category, i) in categories"
            :index="i"
            :category="category"
            :key="category"
        />

        <h2 class="label">Summarium</h2>

        <div class="notes">
            <note-row v-for="note in notes" :note="note" :key="note.id" />
        </div>

        <div v-for="plugin in plugins" :key="plugin.id">
            <input
                v-model="activePlugin"
                type="radio"
                name="plugins"
                :value="plugin.id"
                :id="plugin.id"
            />
            <label :for="plugin.id">{{ plugin.name }}</label>
        </div>
    </main>
</template>

<script setup>
import useNotes from '@/composables/useNotes'
import usePlugins from '@/composables/usePlugins'
import useConfig from '@/composables/useConfig'
import { onMounted, ref, watch } from 'vue'
import CategoryRow from '@/components/CategoryRow.vue'
import NoteRow from '@/components/NoteRow.vue'

const { categories, loadCategories, loadCategoryNotes, notesChangeCount } =
    useNotes()

const { config } = useConfig()
const { plugins, setActivePlugin } = usePlugins()

const activePlugin = ref(config.value?.activeAdapter)

const notes = ref()

async function refreshNotes() {
    await loadCategories()
    notes.value = await loadCategoryNotes()
}

onMounted(async () => {
    await refreshNotes()
})

watch(notesChangeCount, async () => {
    await refreshNotes()
})
watch(activePlugin, async (pluginId) => {
    await setActivePlugin(pluginId)
    await refreshNotes()
})
</script>

<style lang="scss">
main.directory {
    padding-top: 18px;
    padding-bottom: 30px;

    input[type='radio'] {
        display: block;
        width: 10px;
        height: 10px;
        margin-right: 10px;
        border: 1px solid white;

        &:checked {
            background-color: white;
        }
    }

    .label {
        text-transform: uppercase;
        margin: 17px 0 24px;
        @include p;
    }
    .notes {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }
}
</style>
