<script setup lang="ts">
interface NavItem {
    title: string
    _path: string
    _id?: string
    _draft?: boolean
    children?: NavItem[]

    [key: string]: any
}
interface Props {
    link: NavItem;
}

const props = defineProps<Props>();
const hasChildren = computed(() => {
    return props.link && props.link.children && props.link.children.length > 0 || false;
});

const collapsed = ref(!useRoute().path.startsWith(props.link._path));
</script>

<template>
    <div class="tree-item">
        <template v-if="hasChildren">
            <div class="tree-item-self" :class="{ 'is-collapsed': collapsed, 'mod-collapsible is-clickable': hasChildren }" data-path="{{ props.link.title }}" @click="collapsed = hasChildren && !collapsed">
                <div v-if="hasChildren" class="tree-item-icon collapse-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="svg-icon right-triangle">
                        <path d="M3 8L12 17L21 8"></path>
                    </svg>
                </div>
                <div class="tree-item-inner">{{ link.title }}</div>
            </div>
            <div v-if="!collapsed" class="tree-item-children">
                <NavigationLink v-if="hasChildren" v-for="l of link.children" :link="l"/>
            </div>
        </template>
        <NuxtLink v-else class="tree-item-self" :to="link._path" :active-class="'mod-active'">
            <div class="tree-item-inner">{{ link.title }}<span v-if="link"></span></div>
        </NuxtLink>
    </div>
</template>