import './App.css';

import { useEffect } from 'react';

import {
  createHashRouter,
  Navigate,
} from 'react-router';
import { RouterProvider } from 'react-router/dom';

import { rpcClient } from './api/request';
import { AppConfigShell } from './components/AppConfigShell';
import CollectionViewStack
  from './components/CollectionView/CollectionViewStack';
import ActionDialog, { actionDialogRef } from './componentsRoot/ActionDialog';
import AudioRecordDialog, {
  audioRecordDialogRef,
} from './componentsRoot/AudioRecordDialog';
import {
  BalanceAndPaymentDialog,
  balanceAndPaymentDialogRef,
} from './componentsRoot/BalanceAndPaymentDialog';
import ChangeEmailDialog, {
  changeEmailDialogRef,
} from './componentsRoot/ChangeEmailDialog/ChangeEmailDialog';
import ChangeLangDialog, {
  changeLangDialogRef,
} from './componentsRoot/ChangeLangDialog';
import ChangePasswordDialog, {
  changePasswordDialogRef,
} from './componentsRoot/ChangePasswordDialog';
import ChangePhoneDialog, {
  changePhoneDialogRef,
} from './componentsRoot/ChangePhoneDialog/ChangePhoneDialog';
import CollectionFieldsDialog, {
  collectionFieldsDialogRef,
} from './componentsRoot/CollectionFieldsDialog';
import ConfirmAlert, { confirmAlertRef } from './componentsRoot/ConfirmAlert';
import DialogHallEditor, {
  dialogHallEditorRef,
} from './componentsRoot/DialogHallEditor/DialogHallEditor';
import DialogRegionEditor, {
  dialogRegionEditorRef,
} from './componentsRoot/DialogRegionEditor';
import ErrorConnectSplash from './componentsRoot/ErrorConnectSplash';
import ExportDialog, { exportDialogRef } from './componentsRoot/ExportDialog';
import {
  GeoSearchCommand,
  geoSearchCommandRef,
} from './componentsRoot/GeoSearchCommand';
import GeoSelectMapCommand, {
  geoSelectMapCommandRef,
} from './componentsRoot/GeoSelectMapCommand';
import {
  IDSearchCommand,
  idSearchCommandRef,
} from './componentsRoot/IDsSearchCommand/IDSearchCommand';
import {
  IDsSearchCommand,
  idsSearchCommandRef,
} from './componentsRoot/IDsSearchCommand/IDsSearchCommand';
import {
  ImageEditor,
  imageEditorRef,
} from './componentsRoot/ImageEditor/ImageEditor';
import InputDialog, { inputDialogRef } from './componentsRoot/InputDialog';
import LinkedSocialNetworksDialog, {
  linkedSocialNetworksDialogRef,
} from './componentsRoot/LinkedSocialNetworksDialog/LinkedSocialNetworksDialog';
import MediaBrowserDialog, {
  mediaBrowserDialogRef,
} from './componentsRoot/MediaBrowserDialog';
import PaymentDialog, {
  paymentDialogRef,
} from './componentsRoot/PaymentDialog';
import ReadExcelFileModal, {
  readExcelFileModalRef,
} from './componentsRoot/ReadExcelFileModal';
import SocialInfoDialog, {
  socialInfoDialogRef,
} from './componentsRoot/SocialInfoDialog';
import ToastRoot, {
  toast,
  toastRootRef,
} from './componentsRoot/ToastRoot';
import {
  getFullURL,
  IS_DEV,
} from './config';
import { Lang } from './lang/Lang';
import LoginPage from './pages/LoginPage/LoginPage';
import MainPage from './pages/MainPage.tsx/MainPage';

const router = createHashRouter([
  {
    path: '/',
    element: localStorage.getItem('token') ? <MainPage /> : <LoginPage />,
  },
  {
    path: '/*',
    element: <Navigate to="/" replace />,
  },
], {
  future: {
    v7_normalizeFormMethod: true,
  },
});

rpcClient.setToken(() => localStorage.getItem('token'));
rpcClient.setEndpoints([getFullURL()]);

if (window.location.hostname === 'localhost') {
  rpcClient.setUseEncrypt(false);
} else {
  rpcClient.setUseEncrypt(true);
}

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


document.querySelector('.start-loader-container')?.remove();

rpcClient.setUnauthorizedHandler(() => {
  localStorage.removeItem('token');
  window.location.reload();
});

if (!IS_DEV) {
  console.log = () => { };
  console.error = () => { };
  console.warn = () => { };
  console.info = () => { };
  console.debug = () => { };
  console.trace = () => { };
  console.dir = () => { };
  console.dirxml = () => { };
  console.group = () => { };
  console.groupEnd = () => { };
  console.time = () => { };
  console.timeEnd = () => { };
  console.timeLog = () => { };
  console.timeStamp = () => { };
  console.count = () => { };
  console.countReset = () => { };
  console.groupCollapsed = () => { };
  console.groupEnd = () => { };
}

const App = () => {
  useEffect(() => {
    Lang.initLang();
  }, []);

  return (
    <AppConfigShell>
      <RouterProvider router={router} />

      <ToastRoot ref={toastRootRef} />
      <CollectionViewStack />
      <GeoSearchCommand ref={geoSearchCommandRef} />
      <GeoSelectMapCommand ref={geoSelectMapCommandRef} />

      <AudioRecordDialog ref={audioRecordDialogRef} />
      <CollectionFieldsDialog ref={collectionFieldsDialogRef} />
      <ActionDialog ref={actionDialogRef} />
      <BalanceAndPaymentDialog ref={balanceAndPaymentDialogRef} />
      <ExportDialog ref={exportDialogRef} />
      <ChangeLangDialog ref={changeLangDialogRef} />
      <ReadExcelFileModal ref={readExcelFileModalRef} />
      <DialogRegionEditor ref={dialogRegionEditorRef} />
      <MediaBrowserDialog ref={mediaBrowserDialogRef} />
      <InputDialog ref={inputDialogRef} />
      <PaymentDialog ref={paymentDialogRef} />
      <SocialInfoDialog ref={socialInfoDialogRef} />
      <DialogHallEditor ref={dialogHallEditorRef} />
      <IDSearchCommand ref={idSearchCommandRef} />
      <IDsSearchCommand ref={idsSearchCommandRef} />
      <ChangePasswordDialog ref={changePasswordDialogRef} />
      <ChangePhoneDialog ref={changePhoneDialogRef} />
      <ChangeEmailDialog ref={changeEmailDialogRef} />
      <LinkedSocialNetworksDialog ref={linkedSocialNetworksDialogRef} />

      <ImageEditor ref={imageEditorRef} />

      <ErrorConnectSplash />
      <ConfirmAlert ref={confirmAlertRef} />
    </AppConfigShell>
  );
};

export default App;
