import {
  setSidebarStatus,
  getSize,
  setSize,
  setLanguage
} from '@/utils/localStorage';
import { defineStore } from 'pinia';
import { getLanguage } from '@/lang/index';
import { computed, reactive, ref } from 'vue';
import { useStorage } from '@vueuse/core';

// Element Plus 语言包
import zhCn from 'element-plus/es/locale/lang/zh-cn';
import en from 'element-plus/es/locale/lang/en';

export enum DeviceType {
  mobile,
  desktop
}

export enum SizeType {
  default,
  large,
  small
}
export const usetTheme = {
  token: {
    colorPrimary: '#1890ff',
    borderRadius: 2,
  },
};
// setup
export const useAppStore = defineStore('app', () => {
  // state
  const device = useStorage<string>('device', 'desktop');
  const size = ref(getSize() || 'default');
  const language = ref(getLanguage());
  const sidebar = reactive({
    withoutAnimation: false
  });

  const locale = computed(() => {
    if (language?.value == 'en') {
      return en;
    } else {
      return zhCn;
    }
  });


  function changeSize(val: string) {
    size.value = val;
    setSize(val);
  }

  function changeLanguage(val: string) {
    language.value = val;
    setLanguage(val);
  }

  return {
    device,
    sidebar,
    language,
    locale,
    size,
    changeSize,
    changeLanguage,
  };
});