<script setup>
import { onMounted, useSlots } from 'vue';
import { useI18n } from 'vue-i18n';
import { useStateStore } from 'stores/useStateStore';
import { useQuasar } from 'quasar';
import { useHasContent } from 'src/composables/useHasContent';

const { t } = useI18n();
const quasar = useQuasar();
const stateStore = useStateStore();
const slots = useSlots();
const hasContent = useHasContent('#right-panel');

defineProps({
    overlay: {
        type: Boolean,
        default: false,
    },
});

onMounted(() => {
    if ((!slots['right-panel'] && !hasContent.value) || quasar.platform.is.mobile)
        stateStore.rightDrawer = false;
});
</script>
<template>
    <Teleport to="#actions-prepend" v-if="stateStore.isHeaderMounted()">
        <div class="row q-gutter-x-sm">
            <QBtn
                v-if="hasContent || $slots['right-panel']"
                flat
                @click="stateStore.toggleRightDrawer()"
                round
                dense
                icon="dock_to_left"
                data-cy="toggle-right-drawer"
            >
                <QTooltip bottom anchor="bottom right">
                    {{ t('globals.collapseMenu') }}
                </QTooltip>
            </QBtn>
        </div>
    </Teleport>
    <QDrawer
        v-model="stateStore.rightDrawer"
        side="right"
        :width="256"
        :overlay="overlay"
    >
        <QScrollArea class="fit">
            <div id="right-panel"></div>
            <slot v-if="!hasContent" name="right-panel" />
        </QScrollArea>
    </QDrawer>
</template>
