import { ref, watch } from 'vue';
import { defineStore } from 'pinia';
import config from '@KTXC/config';
import { useUserStore } from './userStore';

export type MenuMode = 'apps' | 'user-settings' | 'admin-settings';

export const useLayoutStore = defineStore('layout', () => {
  // Loading state
  const isLoading = ref(false);

  // Sidebar state - initialize from settings or config
  const userStore = useUserStore();
  const sidebarDrawer = ref(userStore.getSetting('sidebar_drawer') ?? config.Sidebar_drawer);
  const miniSidebar = ref(userStore.getSetting('mini_sidebar') ?? config.mini_sidebar);
  const menuMode = ref<MenuMode>('apps');

  // Theme state - initialize from settings or config
  const theme = ref(userStore.getSetting('theme') ?? config.actTheme);
  const font = ref(userStore.getSetting('font') ?? config.fontTheme);

  // Watch and sync sidebar state to settings
  watch(sidebarDrawer, (value) => {
    userStore.setSetting('sidebar_drawer', value);
  });

  watch(miniSidebar, (value) => {
    userStore.setSetting('mini_sidebar', value);
  });

  watch(theme, (value) => {
    userStore.setSetting('theme', value);
  });

  watch(font, (value) => {
    userStore.setSetting('font', value);
  });

  // Actions
  function toggleSidebarDrawer() {
    sidebarDrawer.value = !sidebarDrawer.value;
  }

  function setMiniSidebar(value: boolean) {
    miniSidebar.value = value;
  }

  function setTheme(value: string) {
    theme.value = value;
  }

  function setFont(value: string) {
    font.value = value;
  }

  function setMenuMode(value: MenuMode) {
    menuMode.value = value;
  }

  function toggleMenuMode() {
    // Cycle through: apps -> user-settings -> admin-settings -> apps
    const modes: MenuMode[] = ['apps', 'user-settings', 'admin-settings'];
    const currentIndex = modes.indexOf(menuMode.value);
    const nextIndex = (currentIndex + 1) % modes.length;
    menuMode.value = modes[nextIndex];
  }

  return {
    // State
    isLoading,
    sidebarDrawer,
    miniSidebar,
    menuMode,
    theme,
    font,

    // Actions
    toggleSidebarDrawer,
    setMiniSidebar,
    setMenuMode,
    toggleMenuMode,
    setTheme,
    setFont
  };
});