import { store } from '@/store';
import { defineStore } from 'pinia';
import projectSetting from '@/settings/projectSetting';
import type {
  IHeaderSetting,
  IMenuSetting,
  IMultiTabsSetting,
  ICrumbsSetting,
} from '/#/config';
import { getUserStyleSetting } from '@/api/system/user';
import { useDesignSetting } from './designSetting';
const {
  navMode,
  navTheme,
  isMobile,
  headerSetting,
  showFooter,
  menuSetting,
  multiTabsSetting,
  crumbsSetting,
  // permissionMode,
  isPageAnimate,
  pageAnimateType,
} = projectSetting;

interface ProjectSettingState {
  navMode: string; //导航模式
  navTheme: string; //导航风格
  headerSetting: IHeaderSetting; //顶部设置
  showFooter: boolean; //页脚
  menuSetting: IMenuSetting; //多标签
  multiTabsSetting: IMultiTabsSetting; //多标签
  crumbsSetting: ICrumbsSetting; //面包屑
  // permissionMode: string; //权限模式
  isPageAnimate: boolean; //是否开启路由动画
  pageAnimateType: string; //路由动画类型
  isMobile: boolean; // 是否处于移动端模式
}

export const useProjectSettingStore = defineStore({
  id: 'app-project-setting',
  state: (): ProjectSettingState => ({
    navMode: navMode,
    navTheme,
    isMobile,
    headerSetting,
    showFooter,
    menuSetting,
    multiTabsSetting,
    crumbsSetting,
    // permissionMode,
    isPageAnimate,
    pageAnimateType,
  }),
  getters: {
    getNavMode(): string {
      return this.navMode;
    },
    getNavTheme(): string {
      return this.navTheme;
    },
    getIsMobile(): boolean {
      return this.isMobile;
    },
    getHeaderSetting(): object {
      return this.headerSetting;
    },
    getShowFooter(): boolean {
      return this.showFooter;
    },
    getMenuSetting(): object {
      return this.menuSetting;
    },
    getMultiTabsSetting(): object {
      return this.multiTabsSetting;
    },
    getCrumbsSetting(): object {
      return this.crumbsSetting;
    },
    // getPermissionMode(): string {
    //   return this.permissionMode;
    // },
    getIsPageAnimate(): boolean {
      return this.isPageAnimate;
    },
    getPageAnimateType(): string {
      return this.pageAnimateType;
    },
  },
  actions: {
    async setProjectSetting() {
      const useDesignSettingStore = useDesignSetting();
      const { data } = await getUserStyleSetting();
      this.navMode = data.navMode;
      this.navTheme = data.navTheme;
      this.isMobile = data.isMobile;
      this.headerSetting = data.headerSetting;
      this.showFooter = data.showFooter;
      this.menuSetting = data.menuSetting;
      this.multiTabsSetting = data.multiTabsSetting;
      this.crumbsSetting = data.crumbsSetting;
      this.isPageAnimate = data.isPageAnimate;
      this.pageAnimateType = data.pageAnimateType;

      useDesignSettingStore.setAppTheme(data.appTheme);
    },

    setIsMobile(value: boolean): void {
      this.isMobile = value;
    },
  },
});

export function useProjectSetting() {
  return useProjectSettingStore(store);
}