import type {NextPage} from 'next'
import Head from 'next/head'
import styles from '../styles/Home.module.css'
import { useRouter } from "next/router";
import {AppShell, Header, Navbar, Text} from '@mantine/core';

import ReportDetails from '../components/ReportDetails';
import ReportNavigator from '../components/ReportNavigator';
import {useEffect, useState} from "react";

const Home: NextPage = () => {
  const [currentReport, setCurrentReport] = useState<any>();
  const { query } = useRouter();
  const basePath = query.basePath ? query.basePath as string : '/output';

  return (
    <div>
      <Head>
        <title>BBGO Back-Test Report</title>
        <meta name="description" content="Generated by create next app"/>
        <link rel="icon" href="/favicon.ico"/>
      </Head>
      <main className={styles.main}>
        <AppShell
          padding="sm"
          navbar={<Navbar width={{base: 250}} height={500} p="xs">

            <ReportNavigator onSelect={(reportEntry) => {
              setCurrentReport(reportEntry)
            }}/>

          </Navbar>}
          header={
            <Header height={50} p="sm">
              <Text>BBGO Back-Test Report</Text>
            </Header>
          }
          styles={(theme) => ({
            main: {backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[0]},
          })}
        >
          {
            currentReport ? <ReportDetails basePath={basePath} runID={currentReport.id}/> : null
          }
        </AppShell>
      </main>
    </div>
  )
}

export default Home
