import { defineStore } from 'pinia';
import { store } from '@/store';
import projectSetting from '@/settings/projectSetting';
import type { ProjectSettingState } from '/#/config';

const {
  layout,
  navTheme,
  headerTheme,
  headerSetting,
  bodySetting,
  menuSetting,
  multiTabsSetting,
  crumbsSetting,
  permissionMode,
  isPageAnimate,
  pageAnimateType,
  isProjectSetting,
} = projectSetting;

export const useProjectSettingStore = defineStore({
  id: 'app-project-setting',
  state: (): ProjectSettingState => ({
    layout,
    navTheme,
    headerTheme,
    headerSetting,
    bodySetting,
    menuSetting,
    multiTabsSetting,
    crumbsSetting,
    permissionMode,
    isPageAnimate,
    pageAnimateType,
    isProjectSetting,
  }),
  getters: {
    getLayout(): string {
      return this.layout;
    },
    getNavTheme(): string {
      return this.navTheme;
    },
    getHeaderTheme(): string {
      return this.headerTheme;
    },
    getHeaderSetting(): object {
      return this.headerSetting;
    },
    getBodySetting(): object {
      return this.bodySetting;
    },
    getMenuSetting(): object {
      return this.menuSetting;
    },
    getMultiTabsSetting(): object {
      return this.multiTabsSetting;
    },
    getCrumbsSetting(): object {
      return this.multiTabsSetting;
    },
    getPermissionMode(): string {
      return this.permissionMode;
    },
    getIsPageAnimate(): boolean {
      return this.isPageAnimate;
    },
    getPageAnimateType(): string {
      return this.pageAnimateType;
    },
    getIsProjectSetting(): boolean {
      return this.isProjectSetting;
    },
  },
  actions: {
    setNavTheme(value: string): void {
      this.navTheme = value;
    },
    setMenuSetting(values: object): void {
      this.menuSetting = Object.assign(this.menuSetting, values);
    },
  },
});

// Need to be used outside the setup
export function useProjectSettingStoreWithOut() {
  return useProjectSettingStore(store);
}