import { useEffect, useState } from 'react'
import { Provider, useDispatch, useSelector } from 'react-redux'

import {
  createStore,
  FAILED,
  IN_PROGRESS,
  SUCCEEDED,
  load,
} from '@epicformbuilder/public/data'
import Form from './scenes/Form'
import NoForm from './scenes/NoForm'
import { PluginsContextProvider } from '@epicformbuilder/common/contexts/Plugins'
import ConfigurationLoader from '@epicformbuilder/common/services/ConfigurationLoader'
import PluginsLoader from '@epicformbuilder/common/services/PluginsLoader'

function AppContent ({ id }) {

  const [ configurationLoaded, setConfigurationLoaded ] = useState( false )
  const [ pluginsLoaded, setPluginsLoaded ] = useState( false )

  const dispatch = useDispatch()

  const formLoadStatus  = useSelector( store => store.loading )
  const form            = useSelector( store => store.form )
  const submissionToken = useSelector( store => store.submissionToken )

  // Load configuration, plugins and the form (into Redux through dispatch).
  useEffect(() => {
    ConfigurationLoader.load( "public" )
    .then( () => {
      setConfigurationLoaded( true )
      return PluginsLoader.load()
    } )
    .then( () => {
      setPluginsLoaded( true )
      return dispatch( load( id ) )
    } )
  }, [ id ] )

  const isApplicationReady = configurationLoaded
      && pluginsLoaded
      && formLoadStatus

  switch ( isApplicationReady ) {
    case SUCCEEDED:
      return Object.keys( form ).length > 0
          ? <Form form={ form } submissionToken={ submissionToken } />
          : <NoForm />
    case FAILED:
      return <p>Error</p>
    case IN_PROGRESS:
    default:
      return null
  }
}

export default function App ({ id } ) {
  // Each mounted widget owns its own store: a shared one would let two forms
  // on the same page overwrite each other's form data and submission token.
  const [ store ] = useState( () => createStore() )

  return (
      <PluginsContextProvider>
        <Provider store={ store }>
          <AppContent id={ id } />
        </Provider>
      </PluginsContextProvider>
  )
}