import { defineStore } from 'pinia';
import { AppState } from './types';
import { usePermissionApi } from '@/http/role';
import { SystemPermission } from '@/types/system-permission';

const useAppStore = defineStore('app', {
  state: (): AppState => ({
    theme: 'light',
    colorWeak: false,
    navbar: true,
    menu: true,
    hideMenu: false,
    menuCollapse: false,
    footer: true,
    themeColor: '#165DFF',
    menuWidth: 210,
    globalSettings: false,
    device: 'desktop',
    tabBar: false,
    permissions: [],
  }),

  getters: {
    appCurrentSetting(state: AppState): AppState {
      return { ...state };
    },
    appDevice(state: AppState) {
      return state.device;
    },
    appMenu(state: AppState): SystemPermission[] {
      return state.permissions?.filter((item) => item.guard === 'Admin' && item.type === 'Menu') || [];
    },
  },

  actions: {
    // Update app settings
    updateSettings(partial: Partial<AppState>) {
      // @ts-ignore-next-line
      this.$patch(partial);
    },

    // Change theme color
    toggleTheme(dark: boolean) {
      if (dark) {
        this.theme = 'dark';
        document.body.setAttribute('arco-theme', 'dark');
      } else {
        this.theme = 'light';
        document.body.removeAttribute('arco-theme');
      }
    },
    toggleDevice(device: string) {
      this.device = device;
    },
    toggleMenu(value: boolean) {
      this.hideMenu = value;
    },
    queryPermissionList() {
      usePermissionApi
        .get({
          setColumn: ['id', 'parent_id', 'guard', 'name', 'label', 'icon', 'weight', 'type'],
          fetchType: 'all',
          sortBy: 'weight',
          sortType: 'desc',
        })
        .then(({ data }) => (this.permissions = data));
    },
  },
});

export default useAppStore;