import 'dayjs/locale/ru'; // load on demand

import { useEffect } from 'react';

import dayjs from 'dayjs';
import { App } from 'konsta/react';
import { observer } from 'mobx-react';

import { rpcClient } from './api/request';
import ToastRoot, {
  toast,
  toastRootRef,
} from './components/ToastRoot';
import { getEndpoint } from './config';
import ChannelPage from './pages/ChannelPage/ChannelPage';
import MainPage from './pages/MainPage/MainPage';
import {
  RouterRoot,
  routerRootRef,
} from './router/router';
import store from './stores/store';
import { isIOS } from './utils/platform';
import {
  ColorEnumBGOY,
  setColorTheme,
} from './utils/themeColor';

dayjs.locale("ru");


rpcClient.setEndpoints([getEndpoint()]);

rpcClient.setToast((message) => {
  toast(message);
});


const MainApp = () => {


  const { userID, selectChannelID } = store;

  useEffect(() => {

    const searchParams = new URLSearchParams(window.location.search);


    const cap = searchParams.get("cap");
    if (cap) {
      store.setCap(true);
    } else {
      store.setCap(false);
    }



    const dark = searchParams.get("dark");
    if (dark) {
      document.body.classList.add("dark");
    } else {
      document.body.classList.remove("dark");
    }



    let theme = searchParams.get("theme");


    if (theme) {


      setColorTheme(theme as ColorEnumBGOY);

    }






  }, []);


  return <App

    theme={isIOS() ? "ios" : "material"} safeAreas>

    <RouterRoot ref={routerRootRef} />
    <ToastRoot ref={toastRootRef} />
  </App>


  return (
    <App

      theme={isIOS() ? "ios" : "material"} safeAreas>

      {!userID ?
        <div></div> : <>

          {store.isMobile() && selectChannelID ?
            <ChannelPage /> :

            !store.isFixedChannel ? <MainPage /> : <div></div>}



        </>}









    </App>
  );
};

export default observer(MainApp);
