import { h, render } from 'preact'
import { useState } from 'preact/hooks'
import { ThemeProvider } from 'styled-components'
import { BrowserRouter, Route, Switch } from 'react-router-dom'

import Main from './app'
import SeriesPage from './src/pages/SeriesPage'
import { useEventApi } from './src/hooks/data'
import { useTheme } from './src/store'
import { useTimeout } from './src/hooks/timerHooks'
import LoaderLayout from './src/pages/LoaderLayout'
import FourOhFour from './src/pages/404'
import Series from './src/pages/Series'
import Program from './src/pages/Program'

const App = () => {
  const { theme } = useTheme((store) => store)
  const { data, loading: eventsLoading } = useEventApi()
  const [minLoadTimePassed, setMinTimeUp] = useState(false)

  useTimeout(() => {
    setMinTimeUp(true)
  }, 1500)

  // console.log({ episodes: data.episodes, series: data.series })

  const seriesData = data.series ? Object.values(data.series) : []


  return (
    <ThemeProvider theme={theme}>
      {!seriesData.length || eventsLoading || !minLoadTimePassed ? (
        <LoaderLayout />
      ) : (
        <BrowserRouter>
          <Switch>
            <Route exact path="/" component={Main} />
            <Route exact path="/series" component={Series} />
            <Route exact path="/program" component={Program} />
            {seriesData.length ? seriesData.map(series => (
              <Route exact path={`/series/${series.slug}`}>
                <SeriesPage data={series} />
              </Route>)) : null}
            <Route path="*">
              <FourOhFour />
            </Route>
          </Switch>
        </BrowserRouter>
      )}
    </ThemeProvider>)
}


const appEl = document.getElementById('app')

render(<App />, appEl)