import './styles/index.scss';
import 'react-toastify/dist/ReactToastify.css';

import axios from 'axios';
import * as log from 'loglevel';
import React, { useReducer } from 'react';
import ReactDOM from 'react-dom';
import { ToastContainer, Zoom, toast } from 'react-toastify';

import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';

import { initialState, IState, MiniAppContext } from './context/miniAppContext';
import { reducer } from './context/reducer';
import * as logHelper from './utils/logHelper';
import Simulator from './views/Simulator';
import ErrorPage from './views/ErrorPage/errorPage';
import './i18n';

library.add(fas);
logHelper.load();

interface AppProp {
  appJson: IState;
}

const App: React.FC<AppProp> = (props) => {
  const [state, dispatch] = useReducer(reducer, props.appJson);
  return (
    <React.Suspense fallback="loading...">
      <MiniAppContext.Provider value={{ state, dispatch }}>
        <Simulator />
        <ToastContainer
          position="bottom-right"
          autoClose={5000}
          transition={Zoom}
          hideProgressBar={false}
          newestOnTop={false}
          closeOnClick
          rtl={false}
          pauseOnFocusLoss
          draggable
          pauseOnHover
        />
      </MiniAppContext.Provider>
    </React.Suspense>
  );
};

App.defaultProps = {
  appJson: initialState,
};
axios
  .get('/workspace/app.json')
  .then((res) => {
    if (
      !(
        res.data.appName &&
        res.data.version &&
        res.data.baseLibraryVersion &&
        res.data.pages &&
        res.data.pages.length > 0
      )
    ) {
      toast.error(
        `Please enter values for all mandatory keys in app.json: appName, baseLibraryVersion, pages, version`,
        { autoClose: false }
      );
    }
    log.info(`app.json: ${JSON.stringify(res.data)}`);
    ReactDOM.render(
      <React.StrictMode>
        <App appJson={res.data} />
      </React.StrictMode>,
      document.getElementById('root')
    );
  })
  .catch(() => {
    ReactDOM.render(
      <ErrorPage msg="app.json not found" />,
      document.getElementById('root')
    );
  });