import React, { memo, useMemo } from 'react';
import useMappedState from '@Hooks/useMappedState';
import MainAppView from '@Components/Layer/MainAppView';
import MainAppCheckView from '@Components/Layer/MainAppCheckView';
import ModalDialog from '@Components/Common/Modals/ModalDialog';
import ModalConfirm from '@Components/Common/Modals/ModalConfirm';
import { AppProps } from './types';

const App: React.FC<AppProps> = ({ Router, routerProps }): React.ReactElement => {
  /* Global & Local State */
  const storeUser = useMappedState((state) => state.user);
  /* Views */
  const RenderMainView = useMemo(() => {
    if (storeUser.userAuthCheck) {
      return <MainAppView />;
    }
    return <MainAppCheckView />;
  }, [storeUser.userAuthCheck]);
  /* Main */
  return (
    <Router {...routerProps}>
      {RenderMainView}
      <ModalDialog />
      <ModalConfirm />
    </Router>
  );
};

export default memo(App);