import { ref } from 'vue';
import { defineStore } from 'pinia';

export const useStateStore = defineStore('stateStore', () => {
    const isMounted = ref(false);
    const leftDrawer = ref(false);
    const rightDrawer = ref(false);

    function toggleLeftDrawer() {
        leftDrawer.value = !leftDrawer.value;
    }

    function toggleRightDrawer() {
        rightDrawer.value = !rightDrawer.value;
    }

    function setMounted() {
        isMounted.value = true;
    }

    function isHeaderMounted() {
        return isMounted.value;
    }

    function isLeftDrawerShown() {
        return leftDrawer.value;
    }

    function isRightDrawerShown() {
        return rightDrawer.value;
    }

    function isSubToolbarShown() {
        return (
            !!document.querySelector('#st-data') &&
            !!document.querySelector('#st-actions')
        );
    }

    return {
        leftDrawer,
        rightDrawer,
        setMounted,
        isHeaderMounted,
        toggleLeftDrawer,
        toggleRightDrawer,
        isLeftDrawerShown,
        isRightDrawerShown,
        isSubToolbarShown,
    };
});