import React, { ReactNode } from 'react';
import { ThemeProvider } from "@nemo-ui/core";
import { Header } from './components';
import { GlobalStyle } from './ui';
import styled from 'styled-components';
import { Page404 } from './page-404';
import { PageHistory } from './page-history';
import { PageResult } from './page-result';
import { PageGenerate } from './page-generate';
import { Route, RouterProvider } from 'atomic-router-react';
import { router } from './routing';
import {AuthGuard} from './auth';


const Wrapper = styled.div``;

const PageLayout: React.FC<{ children: ReactNode }> = (props) => {
  return (
    <AuthGuard>
      <Wrapper>
        <Header />
        {props.children}
      </Wrapper>
    </AuthGuard>
  )
}


export const App = () => (
  <ThemeProvider >
    <GlobalStyle />
    <RouterProvider
      router={router}
    >
      <Route
        route={Page404.route}
        view={Page404.Page}
      />
      <Route
        route={PageHistory.route}
        view={() => <PageLayout><PageHistory.Page/></PageLayout>}
      />
      <Route
        route={PageResult.route}
        view={() => <PageLayout><PageResult.Page/></PageLayout>}
      />
      <Route
        route={PageGenerate.route}
        view={() => <PageLayout><PageGenerate.Page/></PageLayout>}
      />
    </RouterProvider>
  </ThemeProvider>
);