<script lang="ts">
let icon: HTMLDivElement | null;
function toggleLeftPanel(_: Event) {
    icon!.parentElement!.parentElement!.parentElement!.parentElement!.classList.toggle('is-left-column-open');
}
</script>

<script setup lang="ts">
const { hash, path } = useRoute();

const { data: page } = await useAsyncData('home', queryContent(path.substring(path.indexOf('/explorer') + '/explorer'.length)).findOne);

if(page.value)
    useContentHead(page.value!);

if(hash)
{
    console.log(document.getElementById(hash.substring(1)));
    document.getElementById(hash.substring(1))?.scrollTo({ behavior: 'smooth', top: 100 });
}

onMounted(() => {
    document.querySelectorAll('.callout.is-collapsible .callout-title').forEach(e => {
        e.addEventListener('click', (_) => {
            e.parentElement!.classList.toggle('is-collapsed');
        })
    })

    document.querySelector(".published-container")?.classList.toggle('is-readable-line-width', !page.value || page.value._type !== 'canvas');
})
</script>

<template>
    <div class="site-body-center-column">
        <div class="render-container">
            <template v-if="!!page && page._type == 'markdown' && page.body.children.length > 0">
                <div class="render-container-inner">
                    <div class="publish-renderer">
                        <div class="markdown-preview-view markdown-rendered node-insert-event hide-title">
                            <div class="markdown-preview-sizer markdown-preview-section" style="padding-bottom: 0px;">
                                <h1 v-if="!(page as MarkdownParsedContent).body.children.find((e: MarkdownNode) => e.tag === 'h1')">{{(page as MarkdownParsedContent).title}}</h1>
                                <ContentRenderer :key="page._id" :value="page" />
                            </div>
                        </div>
                        <div class="extra-title">
                            <span class="extra-title-text">Home</span>
                            <span aria-label="Close page" role="button">
                                <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 lucide-x">
                                    <line x1="18" y1="6" x2="6" y2="18"></line>
                                    <line x1="6" y1="6" x2="18" y2="18"></line>
                                </svg>
                            </span>
                        </div>
                    </div>
                </div>
                <RightComponent v-if="page.body?.toc" :toc="page?.body?.toc" />
            </template>
            <CanvasRenderer v-else-if="!!page && page._type == 'canvas'" :key="page._id" :canvas="page" />
            <div v-else-if="!!page">
                <div class="not-found-container">
                    <div class="not-found-image"></div>
                    <div class="not-found-title">Impossible d'afficher (ou vide)</div>
                    <div class="not-found-description">Cette page est actuellement vide ou impossible à traiter</div>
                </div>
            </div>
            <div v-else class="not-found-container">
                <div class="not-found-image"></div>
                <div class="not-found-title">Introuvable</div>
                <div class="not-found-description">Cette page n'existe pas</div>
            </div>
        </div>
    </div>
</template>