<script setup>
import { ref, onMounted, useSlots } from 'vue';
import { useI18n } from 'vue-i18n';
import { useStateStore } from 'stores/useStateStore';

const slots = useSlots();
const hasContent = ref(false);
const rightPanel = ref(null);

onMounted(() => {
    rightPanel.value = document.querySelector('#right-panel');
    if (rightPanel.value.childNodes.length) hasContent.value = true;

    // Check if there's content to display
    const observer = new MutationObserver(() => {
        hasContent.value = rightPanel.value.childNodes.length;
    });

    if (rightPanel.value)
        observer.observe(rightPanel.value, {
            subtree: true,
            childList: true,
            attributes: true,
        });

    if (!slots['right-panel'] && !hasContent.value) stateStore.rightDrawer = false;
});

const { t } = useI18n();
const stateStore = useStateStore();
</script>
<template>
    <Teleport to="#actions-append">
        <div class="row q-gutter-x-sm">
            <QBtn
                v-if="hasContent || $slots['right-panel']"
                flat
                @click="stateStore.toggleRightDrawer()"
                round
                dense
                icon="menu"
            >
                <QTooltip bottom anchor="bottom right">
                    {{ t('globals.collapseMenu') }}
                </QTooltip>
            </QBtn>
        </div>
    </Teleport>
    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
        <QScrollArea class="fit text-grey-8">
            <div id="right-panel"></div>
            <slot v-if="!hasContent" name="right-panel" />
        </QScrollArea>
    </QDrawer>
</template>
