<script setup>
import { useI18n } from 'vue-i18n';
import { useStateStore } from 'stores/useStateStore';
import { useHasContent } from 'src/composables/useHasContent';
import { watch } from 'vue';

const { t } = useI18n();
const stateStore = useStateStore();
const hasContent = useHasContent('#advanced-menu');

const $props = defineProps({
    isMainSection: {
        type: Boolean,
        default: false,
    },
});

watch(
    () => $props.isMainSection,
    (val) => {
        if (stateStore) stateStore.rightAdvancedDrawer = val;
    },
    { immediate: true },
);
</script>
<template>
    <Teleport to="#searchbar-after" v-if="stateStore.isHeaderMounted()">
        <QBtn
            v-if="hasContent || $slots['advanced-menu']"
            flat
            @click="stateStore.toggleRightAdvancedDrawer()"
            round
            icon="tune"
            color="white"
        >
            <QTooltip bottom anchor="bottom right">
                {{ t('globals.advancedMenu') }}
            </QTooltip>
        </QBtn>
    </Teleport>
    <QDrawer
        v-model="stateStore.rightAdvancedDrawer"
        side="right"
        :width="256"
        :overlay="!isMainSection"
        v-bind="$attrs"
    >
        <QScrollArea class="fit">
            <div id="advanced-menu"></div>
            <slot v-if="!hasContent" name="advanced-menu" />
        </QScrollArea>
    </QDrawer>
</template>
