<script setup lang="ts">
import { computed, ref } from 'vue';
import {
    filterHeirarchy,
    getFirstLeaf,
    getPanelHeirarchy,
} from '@/panels/panel';
import PanelHeirarchy from '@/components/PanelHeirarchy.vue';
import router from '@/router';
import TextInput from '@/components/TextInput.vue';

const searchValue = ref('');

const heirarchy = getPanelHeirarchy();

const filtered_heirarchy = computed(() =>
    filterHeirarchy(heirarchy, (leaf) => {
        return leaf.name
            .toLowerCase()
            .includes(searchValue.value.toLowerCase());
    }),
);

function onEnter() {
    const leaf = getFirstLeaf(filtered_heirarchy.value);
    if (leaf != null) {
        router.push(leaf.to);
    }
}
</script>

<template>
    <div class="column stretch screen limited content page">
        <div class="row">
            <TextInput
                autofocus
                class="grow"
                v-model="searchValue"
                placeholder="Search"
                @enter="onEnter"
            ></TextInput>
        </div>

        <div class="row grow stretch no-min-height">
            <div class="column grow scroll no-min-height">
                <PanelHeirarchy
                    :heirarchy="filtered_heirarchy"
                    v-if="filtered_heirarchy.length > 0"
                ></PanelHeirarchy>
                <div v-else>
                    <span>No Matches Found</span>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
@use '@/assets/variables';
</style>
