import React, { useEffect, useState } from 'react'
import { BrowserRouter, Route, Redirect, Switch, Link } from 'react-router-dom'
import { ChakraProvider } from '@chakra-ui/react'
import Navigation from './components/Navigation'
import Index from './components/Index'
import SignIn from './components/SignIn'
import SignUp from './components/SignUp'
import DockerImageCreate from './components/DockerImageCreate'
import DockerImageList from './components/DockerImageList'
import DockerContainerCreate from './components/DockerContainerCreate'
import DockerContainerList from './components/DockerContainerList'
import 'semantic-ui-css/semantic.min.css'

const App = () => {
  return (
    <ChakraProvider>
      <BrowserRouter>
        <Navigation/>
        <Switch>
          <Route exact path="/" component={Index}/>
          <Route exact path="/sign-in" component={SignIn}/>
          <Route exact path="/sign-up" component={SignUp}/>
          <Route exact path="/docker/image/create" component={DockerImageCreate}/>
          <Route exact path="/docker/image/list" component={DockerImageList}/>
          <Route exact path="/docker/container/create"
                 component={DockerContainerCreate}/>
          <Route exact path="/docker/container/list"
                 component={DockerContainerList}/>
          <Redirect path="*" to="/"/>
        </Switch>
      </BrowserRouter>
    </ChakraProvider>
  )
}

export default App