import React, { useState, useEffect } from 'react'
import { HashRouter, Routes, Route } from 'react-router'

import './admin.scss'

import Popup             from './components/Popup/Popup'
import Editor            from './scenes/Editor'
import General           from './scenes/Editor/scenes/General'
import Fields            from './scenes/Editor/scenes/Fields'
import Actions           from './scenes/Editor/scenes/Actions'
import Dashboard         from './scenes/Dashboard'
import Form              from './scenes/Dashboard/scenes/Form'
import Responses         from './scenes/Dashboard/scenes/Form/scenes/Responses'
import Statistics        from './scenes/Dashboard/scenes/Form/scenes/Statistics'
import Export            from './scenes/Dashboard/scenes/Form/scenes/Export'
import Templates         from './scenes/Dashboard/scenes/Templates'
import FormsAndResponses from './scenes/Dashboard/scenes/FormsAndResponses'
import Response          from './scenes/Dashboard/scenes/Response'
import Logs              from './scenes/Dashboard/scenes/Logs'
import Settings          from './scenes/Dashboard/scenes/Settings'
import Index             from './scenes/Dashboard/scenes/Index'
import { AddonPage }     from './components/AddonSlots'

import { PopupContextProvider } from './contexts/Popup'
import { BackLocationContextProvider } from './contexts/BackLocation'
import { PluginsContextProvider } from '@epicformbuilder/common/contexts/Plugins'
import ConfigurationLoader from '@epicformbuilder/common/services/ConfigurationLoader'
import PluginsLoader from '@epicformbuilder/common/services/PluginsLoader'
import { exposeEditorApi } from './editorApi'

export default function App () {
  const [ configurationLoaded, setConfigurationLoaded ] = useState( false )
  const [ pluginsLoaded, setPluginsLoaded ] = useState( false )

  // Load configuration, plugins and the form (into Redux through dispatch).
  useEffect(() => {
    ConfigurationLoader.load( "admin" )
    .then( () => {
      setConfigurationLoaded( true )
      // Add-on editor code imports its building blocks from this global.
      exposeEditorApi()
      return PluginsLoader.load()
    } )
    .then( () => {
      setPluginsLoaded( true )
    } )
  }, [] );

  const isApplicationReady = configurationLoaded
      && pluginsLoaded

  if ( ! isApplicationReady ) {
    return null
  }

  return (
      <HashRouter>
        <PluginsContextProvider>
          <BackLocationContextProvider>
            <PopupContextProvider>
              <Routes path="/">
                <Route path="editor/:uid" element={ <Editor /> }>
                  <Route path={ `general` } element={ <General /> } />
                  <Route path={ `fields` } element={ <Fields /> } />
                  <Route path={ `actions` } element={ <Actions /> } />
                  <Route path={ `logic` } element={ <div>Logic</div> } />
                </Route>
                <Route element={ <Dashboard /> }>
                  <Route path={ `form/:uid` } element={ <Form/> }>
                    <Route path={ `responses` } element={ <Responses/> } />
                    <Route path={ `statistics` } element={ <Statistics/> } />
                    <Route path={ `export` } element={ <Export/> } />
                  </Route>
                  <Route path={ `templates` } element={ <Templates/> } />
                  <Route path={ `forms-and-responses` } element={ <FormsAndResponses/> } />
                  <Route path={ `response/:uid` } element={ <Response/> } />
                  <Route path={ `settings` } element={ <Settings/> } />
                  <Route path={ `logs` } element={ <Logs/> } />
                  <Route path={ `addon/:path` } element={ <AddonPage/> } />
                  <Route index element={ <Index/> } />
                </Route>
              </Routes>
              <Popup />
            </PopupContextProvider>
          </BackLocationContextProvider>
        </PluginsContextProvider>
      </HashRouter>
  )
}