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

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

const refElement = ref<HTMLElement | null>(null);
let combo: Combo | null = null;

onMounted(() => {
    combo = new Combo({
        appendTo : refElement.value as HTMLElement,
        store    : {
            data : [
                { id : 'svalbard-light', text : 'Svalbard Light' },
                { id : 'svalbard-dark', text : 'Svalbard Dark' },
                { id : 'visby-light', text : 'Visby Light' },
                { id : 'visby-dark', text : 'Visby Dark' },
                { id : 'stockholm-light', text : 'Stockholm Light' },
                { id : 'stockholm-dark', text : 'Stockholm Dark' },
                { id : 'material3-light', text : 'Material3 Light' },
                { id : 'material3-dark', text : 'Material3 Dark' },
                { id : 'fluent2-light', text : 'Fluent2 Light' },
                { id : 'fluent2-dark', text : 'Fluent2 Dark' },
                { id : 'high-contrast-light', text : 'High Contrast Light' },
                { id : 'high-contrast-dark', text : 'High Contrast Dark' }
            ]
        },
        label         : 'Theme',
        width         : '16em',
        value         : 'svalbard-light',
        editable      : false,
        labelPosition : 'before',
        ref           : 'themeCombo',
        listeners     : {
            change({ value }: { value: string }) {
                DomHelper.setTheme(value).then((context: any) => {
                    if (context) {
                        const { theme, prev } = context;
                        document.body.classList.remove(`b-theme-${prev}`);
                        document.body.classList.add(`b-theme-${theme}`);
                    }
                });
            }
        }
    });

    // Apply from search param
    const theme = BrowserHelper.searchParam('theme');
    if (theme) {
        combo.value = theme;
    }
});

onBeforeUnmount(() => {
    combo?.destroy();
});
</script>
