import ProtoContextProvider from '@common/hocs/ProtoContext';
import { ConnectedRouter } from '@protolibrary/core';
import React, { useEffect, useState } from 'react';
import AppMain from './AppMain';
import storeConfiguration from './store';
import { DARK_THEME, LIGHT_THEME } from './themes';
import { default as ProtoProvider } from '@protoweb/provider';
import { Route } from 'react-router-dom';
import { useStore } from '@core/states';
import Block from '@protoweb/block';
import NewVersionModal from '@common/modals/NewVersionModal';
import appState from '@core/states/AppState';

interface Props {}

export const ThemeApp = (props: Props) => {
  const { theme, newVersion } = useStore('appState');
  const [showModal, setShowModal] = useState(false);
  useEffect(() => {
    if (newVersion) {
      setShowModal(true);
    }
  }, [newVersion]);

  return (
    <Block
      className={theme === 'LIGHT' ? 'proto-light-theme' : 'proto-dark-theme'}
      style={{ flexDirection: 'row', flex: 1, width: '100%', position: 'relative' }}
    >
      <ProtoProvider theme={theme === 'LIGHT' ? LIGHT_THEME : DARK_THEME}>
        <ProtoContextProvider>
          <ConnectedRouter store={storeConfiguration}>
            <Route component={AppMain} />
          </ConnectedRouter>
        </ProtoContextProvider>
      </ProtoProvider>
      <NewVersionModal
        show={showModal}
        onClose={() => {
          setShowModal(false);
          appState.update({ newVersion: false });
        }}
      />
    </Block>
  );
};
