import { computed, reactive } from 'vue';

// Load preferences from localStorage
const savedDarkMode = localStorage.getItem('darkMode') === 'true';
const savedPrimary = localStorage.getItem('primaryColor') || 'emerald';
const savedSurface = localStorage.getItem('surfaceColor') || null;
const savedPreset = localStorage.getItem('preset') || 'Aura';
const savedMenuMode = localStorage.getItem('menuMode') || 'static';

const layoutConfig = reactive({
    preset: savedPreset,
    primary: savedPrimary,
    surface: savedSurface,
    darkTheme: savedDarkMode,
    menuMode: savedMenuMode
});

// Apply dark mode on initial load
if (savedDarkMode) {
    document.documentElement.classList.add('app-dark');
}

const layoutState = reactive({
    staticMenuDesktopInactive: false,
    overlayMenuActive: false,
    profileSidebarVisible: false,
    configSidebarVisible: false,
    staticMenuMobileActive: false,
    menuHoverActive: false,
    activeMenuItem: null
});

export function useLayout() {
    const setActiveMenuItem = (item) => {
        layoutState.activeMenuItem = item.value || item;
    };

    const toggleDarkMode = () => {
        if (!document.startViewTransition) {
            executeDarkModeToggle();

            return;
        }

        document.startViewTransition(() => executeDarkModeToggle(event));
    };

    const executeDarkModeToggle = () => {
        layoutConfig.darkTheme = !layoutConfig.darkTheme;
        document.documentElement.classList.toggle('app-dark');
        
        // Save preference to localStorage
        localStorage.setItem('darkMode', layoutConfig.darkTheme.toString());
    };

    const toggleMenu = () => {
        if (layoutConfig.menuMode === 'overlay') {
            layoutState.overlayMenuActive = !layoutState.overlayMenuActive;
        }

        if (window.innerWidth > 991) {
            layoutState.staticMenuDesktopInactive = !layoutState.staticMenuDesktopInactive;
        } else {
            layoutState.staticMenuMobileActive = !layoutState.staticMenuMobileActive;
        }
    };

    const isSidebarActive = computed(() => layoutState.overlayMenuActive || layoutState.staticMenuMobileActive);

    const isDarkTheme = computed(() => layoutConfig.darkTheme);

    const getPrimary = computed(() => layoutConfig.primary);

    const getSurface = computed(() => layoutConfig.surface);

    return {
        layoutConfig,
        layoutState,
        toggleMenu,
        isSidebarActive,
        isDarkTheme,
        getPrimary,
        getSurface,
        setActiveMenuItem,
        toggleDarkMode
    };
}