// Libs
// -----------------------------------------------------------------------------
import { FC, useEffect, useState } from 'react';
import { ConfigProvider } from 'antd';
import { observer } from 'mobx-react-lite';
import AntLocaleEn from 'antd/es/locale/en_US';
import AntLocaleRu from 'antd/es/locale/ru_RU';
import moment from 'moment/moment';
import 'moment/locale/ru';

// App
// -----------------------------------------------------------------------------
import { AppRoutes } from 'pages/AppRoutes/AppRoutes';
import { useStore } from 'stores/StoreProvider';
import { RootStore } from 'stores/RootStore';
import { useTranslation, Locale } from 'core/i18n';
import './App.css';

const App: FC = observer(() => {
  // Выбранная локаль Ant Design
  const [antLocale, setAntLocale] = useState(AntLocaleEn);

  // Корневой MobX стор
  const rootStore: RootStore = useStore();

  // Подгрузить системную информацию
  useEffect(() => {
    // Загрузить версию и название продукта
    rootStore.systemInfoStore.fetchProductAndVersion();
    // Загрузить лицензию
    rootStore.licenseStore.fetchLicense();
    // Получить текущего пользователя
    rootStore.currentUserStore.fetchCurrentUser();
  }, [
    rootStore.systemInfoStore,
    rootStore.licenseStore,
    rootStore.currentUserStore,
  ]);

  // Объект системы локализации
  const { i18n } = useTranslation();

  // Переключить локализацию библиотек Ant Design и Moment в зависимости
  // от выбранного языка
  useEffect(() => {
    if (i18n.language === Locale.EN) {
      setAntLocale(AntLocaleEn);
      moment.locale('en');
    } else if (i18n.language === Locale.RU) {
      setAntLocale(AntLocaleRu);
      moment.locale('ru');
    }
  }, [i18n.language]);

  return (
    <ConfigProvider locale={antLocale}>
      <div className="appContainer">
        <div className="appContainer-content">
          <AppRoutes isLicenseActivated={rootStore.licenseStore.isActivated} />
        </div>
      </div>
    </ConfigProvider>
  );
});

export default App;
