import { createApp } from 'vue';
import DevUI from 'vue-devui';
import { ThemeServiceInit, devuiLightTheme, devuiDarkTheme, devuiGreenTheme, devuiGreenDarkTheme, ThemeService } from 'devui-theme';
import './style.scss';
import App from './App.vue';
import router from './router';
import i18n from './frameworks/i18n';
import pinia from './store/store';
import { useDataChangeStore } from './store/data-change';

createApp(App).use(router).use(pinia).use(i18n).use(DevUI).mount('#app');

const dataStore = useDataChangeStore();
const themeService = ThemeServiceInit(
  {
    'light-theme': devuiLightTheme,
    'dark-theme': devuiDarkTheme,
    'green-theme': devuiGreenTheme,
    'green-dark-theme': devuiGreenDarkTheme,
  },
  'light-theme'
) as ThemeService;
themeService.applyTheme(devuiLightTheme);

dataStore.$subscribe((mutation) => {
  const data = mutation.events as any;
  if (data.key === 'theme') {
    const themeMap = {
      light: devuiLightTheme,
      dark: devuiDarkTheme,
    };
    const newTheme = themeMap[data.newValue as 'light' | 'dark'];
    if (newTheme) {
      themeService.applyTheme(newTheme);
    }
  }
});