import React, { createContext, useState } from "react"
import ReactDOM from "react-dom"
import { BrowserRouter, Route, Routes, useParams } from "react-router-dom"
import styled from "styled-components"

import AppProvider from "./appContext"
import Menu from "./components/Menu"
import PlayerListView from "./views/PlayerListView"

const Columns = styled.div`
  display: flex;
  padding: 1em;
`

const Column = styled.div`
  width: 50%;
`

const render = () => (<AppProvider>
  <h1>Numenera Datasphere</h1>
  <Columns>
    <Column>
      <Menu />
    </Column>
    <Column>
      <Routes>
        <Route path="/" element={<div>root</div>} />
        <Route path="campaign" element={<div>campaign</div>} />
        <Route path="players" element={<PlayerListView />}>
          <Route path=":name" element={<PlayerListView />} />
        </Route>
        <Route path="cyphers" element={<div>cyphers</div>} />
        <Route path="battles" element={<div>battles</div>} />
      </Routes>
    </Column>
  </Columns>
</AppProvider>
)

export default render