/* eslint-disable import/no-named-as-default */
/* eslint-disable no-useless-constructor */
/* eslint-disable import/no-named-as-default-member */
/* eslint-disable import/extensions */
import React from 'react';
import { Provider } from 'react-redux';
import BasePropTypes from '@common/models/BasePropTypes';
import { routeManager } from '@protolibrary/core';
import storeConfiguration from './store';
import './assets/css/tooltip.css';
import './assets/fonts/style.scss';
import './assets/colors/style.scss';
import './assets/css/main.scss';
import 'prototable/index.css';

import { ThemeApp } from './ThemeApp';
import { ErrorBoundary } from 'react-error-boundary';
import ErrorFallback from '@common/error/ErrorFallback';
import LocalStorage from '@common/storage/Storage';

class App extends React.Component<BasePropTypes, { theme: any }> {
  constructor(props: BasePropTypes) {
    super(props);
  }

  UNSAFE_componentWillMount(): void {
    routeManager.generateRoutes('', {}, {}, '', {});
    LocalStorage.delete('x-app-version');
  }

  render(): React.ReactNode {
    return (
      // eslint-disable-next-line react/jsx-filename-extension

      <ErrorBoundary
        FallbackComponent={ErrorFallback}
        onReset={details => {
          // Reset the state of your app so the error doesn't happen again
        }}
        onError={(error, componentStack) => {
          // Do something with the runtime error
        }}
      >
        <Provider store={storeConfiguration}>
          <ThemeApp />
          <div id="portal-root" style={{ position: 'relative' }} />
        </Provider>
      </ErrorBoundary>
    );
  }
}

export default App;
