<template>
    <div ref="refElement" />
</template>

<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from 'vue';
import { Fullscreen, Button } from '@bryntum/taskboard';

const instance   = ref<Button | null>(null);
const refElement = ref<HTMLElement | null>(null);

onMounted(() => {
    if (Fullscreen.enabled) {
        instance.value = new Button({
            appendTo  : refElement.value as HTMLElement,
            icon      : 'b-icon b-icon-fullscreen',
            tooltip   : 'Fullscreen',
            rendition : 'text',
            onClick() {
                if (Fullscreen.enabled) {
                    if (!Fullscreen.isFullscreen) {
                        Fullscreen.request(document.body);
                    }
                    else {
                        Fullscreen.exit();
                    }
                }
            }
        });
    }
});

onBeforeUnmount(() => {
    if (instance.value) {
        instance.value.destroy();
    }
});
</script>
