import { inject, provide, ref } from 'vue';
import type { InjectionKey, Ref } from 'vue';

type SidebarState = {
    collapsed: Ref<boolean>;
    mobileOpen: Ref<boolean>;
    toggleCollapsed: () => void;
    toggleMobile: () => void;
    closeMobile: () => void;
};

const key: InjectionKey<SidebarState> = Symbol('console-sidebar');

export function provideSidebar(defaultOpen: boolean): SidebarState {
    const collapsed = ref(!defaultOpen);
    const mobileOpen = ref(false);

    const state: SidebarState = {
        collapsed,
        mobileOpen,
        toggleCollapsed: () => {
            collapsed.value = !collapsed.value;
            document.cookie = `sidebar_state=${!collapsed.value}; path=/; max-age=31536000; SameSite=Lax`;
        },
        toggleMobile: () => {
            mobileOpen.value = !mobileOpen.value;
        },
        closeMobile: () => {
            mobileOpen.value = false;
        },
    };

    provide(key, state);

    return state;
}

export function useSidebar(): SidebarState {
    const state = inject(key);

    if (!state) {
        throw new Error('useSidebar must be used inside the console layout');
    }

    return state;
}