import { ref, computed } from 'vue';

const state = ref({});

const user = ref({
    id: 0,
    name: '',
    nickname: '',
    lang: '',
    darkMode: null,
});

const roles = ref([]);
const drawer = ref(true);
const headerMounted = ref(false);

export function useState() {
    function getUser() {
        return computed(() => {
            return {
                id: user.value.id,
                name: user.value.name,
                nickname: user.value.nickname,
                lang: user.value.lang,
                darkMode: user.value.darkMode,
            };
        });
    }

    function setUser(data) {
        user.value = {
            id: data.id,
            name: data.name,
            nickname: data.nickname,
            lang: data.lang,
            darkMode: data.darkMode,
        };
    }

    function getRoles() {
        return computed(() => {
            return roles.value;
        });
    }

    function setRoles(data) {
        roles.value = data;
    }

    function set(name, data) {
        state.value[name] = ref(data);
    }

    function get(name) {
        return state.value[name];
    }

    function unset(name) {
        delete state.value[name];
    }


    return {
        getUser,
        setUser,
        getRoles,
        setRoles,
        set,
        get,
        unset,
        drawer,
        headerMounted
    };
}