import React from 'react'
import { Route, Switch, Redirect, HashRouter } from 'react-router-dom'
import { createBrowserHistory } from 'history'
import { Layout, Main, Content } from 'cozy-ui/react/Layout'
import { Sprite as IconSprite } from 'cozy-ui/react/Icon'
import { FluidType } from 'enum/fluid.enum'

import AppContextProvider from 'components/Contexts/AppContextProvider'
import Navbar from 'components/ContentComponents/Navbar/Navbar'
import ScrollToTop from 'components/ContainerComponents/ScrollToTop/ScrollToTop'
import HomeViewContainer from 'components/ContainerComponents/ViewContainer/HomeViewContainer'
import ChallengesViewContainer from 'components/ContainerComponents/ViewContainer/ChallengesViewContainer'
import SingleFluidViewContainer from './SingleFluidViewContainer'
import ParametersViewContainer from 'components/ContainerComponents/ViewContainer/ParametersViewContainer'
import FAQViewContainer from 'components/ContainerComponents/ViewContainer/FAQViewContainer'
import FinishedChallengeDetailsViewContainer from './FinishedChallengeDetailsViewContainer'
import OngoingChallengeDetailsViewContainer from './OngoingChallengeDetailsViewContainer'
import LockedChallengeDetailsViewContainer from './LockedChallengeDetailsViewContainer'
import AvailableChallengeDetailsViewContainer from './AvailableChallengeDetailsViewContainer'
import SplashContainer from 'components/ContainerComponents/SplashContainer/SplashContainer'
import WelcomeModalContainer from '../WelcomeModalContainer/WelcomeModalContainer'

export const history = createBrowserHistory()

export const ViewContainer = () => {
  return (
    <HashRouter {...history}>
      <Layout>
        <AppContextProvider>
          <Navbar />
          <WelcomeModalContainer />
          <Main>
            <Content className="app-content">
              <ScrollToTop>
                <Switch>
                  <Route
                    path="/consumption"
                    render={({ match: { url } }) => (
                      <>
                        <Route
                          path={`${url}/electricité`}
                          component={() => (
                            <SingleFluidViewContainer
                              fluidTypes={[FluidType.ELECTRICITY]}
                            />
                          )}
                        />
                        <Route
                          path={`${url}/eau`}
                          component={() => (
                            <SingleFluidViewContainer
                              fluidTypes={[FluidType.WATER]}
                            />
                          )}
                        />
                        <Route
                          path={`${url}/gaz`}
                          component={() => (
                            <SingleFluidViewContainer
                              fluidTypes={[FluidType.GAS]}
                            />
                          )}
                        />
                        <Route
                          path={`${url}/`}
                          component={HomeViewContainer}
                          exact
                        />
                      </>
                    )}
                  />
                  <Route
                    path="/challenges"
                    render={({ match: { url } }) => (
                      <>
                        <Route
                          path={`${url}/locked`}
                          component={LockedChallengeDetailsViewContainer}
                        />
                        <Route
                          path={`${url}/available`}
                          component={AvailableChallengeDetailsViewContainer}
                        />
                        <Route
                          path={`${url}/ongoing`}
                          component={OngoingChallengeDetailsViewContainer}
                        />
                        <Route
                          path={`${url}/finished`}
                          component={FinishedChallengeDetailsViewContainer}
                        />
                        <Route
                          path={`${url}/`}
                          component={ChallengesViewContainer}
                          exact
                        />
                      </>
                    )}
                  />
                  <Route
                    path="/parameters"
                    render={({ match: { url } }) => (
                      <>
                        <Route
                          path={`${url}/FAQ`}
                          component={FAQViewContainer}
                        />
                        <Route
                          path={`${url}/`}
                          component={ParametersViewContainer}
                          exact
                        />
                      </>
                    )}
                  />
                  <Route path="/splash" component={SplashContainer} />
                  <Redirect from="/" to="/consumption" />
                  <Redirect from="*" to="/consumption" />
                </Switch>
              </ScrollToTop>
            </Content>
          </Main>
          <IconSprite />
        </AppContextProvider>
      </Layout>
    </HashRouter>
  )
}

export default ViewContainer