import React from 'react';
import { DATA_SOURCES } from './config';
import { Header } from './components/header';
import { StatsManager } from '@vegaprotocol/network-stats';
import { ThemeContext } from '@vegaprotocol/react-helpers';
import { EnvironmentProvider } from '@vegaprotocol/network-switcher';
import { useThemeSwitcher } from '@vegaprotocol/react-helpers';

const envName = DATA_SOURCES.envName;
const restEndpoint = DATA_SOURCES.restEndpoint;
const statsEndpoint = `${restEndpoint}/statistics`;
const nodesEndpoint = `${restEndpoint}/nodes-data`;

function App() {
  const [theme, toggleTheme] = useThemeSwitcher();

  return (
    <EnvironmentProvider>
      <ThemeContext.Provider value={theme}>
        <div className="w-screen min-h-screen grid pb-24 bg-white text-black-95 dark:bg-black dark:text-white-80">
          <div className="layout-grid w-screen justify-self-center">
            <Header toggleTheme={toggleTheme} />
            <StatsManager
              envName={envName}
              statsEndpoint={statsEndpoint}
              nodesEndpoint={nodesEndpoint}
              className="max-w-3xl px-24"
            />
          </div>
        </div>
      </ThemeContext.Provider>
    </EnvironmentProvider>
  );
}

export default App;
