import React from 'react'
import {combineReducers, createStore, applyMiddleware, compose} from 'redux'
import reduceReducers from 'reduce-reducers'
import thunk from 'redux-thunk'
import { Provider } from 'react-redux'
import { render } from 'react-dom'
import { createBrowserHistory } from 'history'
import Breezy from '@jho406/breezy'
import Nav from '@jho406/breezy/dist/NavComponent'
import ujsHandlers from '@jho406/breezy/dist/utils/ujs'
import { applicationRootReducer, applicationPagesReducer } from './reducer'
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage'
import { visit, remote } from '@jho406/breezy/dist/action_creators'
import { enhanceVisitWithBrowserBehavior } from '@jho406/breezy/dist/utils/react'

// Mapping between your props template to Component, you must add to this
// to register any new page level component you create. If you are using the
// scaffold, it will auto append the identifers for you.
//
// e.g {'posts/new': PostNew}
const identifierToComponentMapping = {
}

const history = createBrowserHistory({})
const initialPage = window.BREEZY_INITIAL_PAGE_STATE

// The base url is an optional prefix to all calls made by the `visit` and
// `remote` thunks
const baseUrl = ''

const {reducer, initialState, initialPageKey, connect} = Breezy.start({
  window,
  initialPage,
  baseUrl,
  history
})

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose

const {
  breezy: breezyReducer,
  pages: pagesReducer,
} = reducer

// Redux Persist settings
// The key is set to the stringified JS asset path to remove the need for
// migrations when hydrating.
const persistKey = window.BREEZY_INITIAL_PAGE_STATE.assets.filter( asset => asset.endsWith('.js'))
const persistConfig = {
  key: JSON.stringify(persistKey),
  storage,
}

// Create the store
// See `./reducer.js` for an explaination of the two included reducers
const store = createStore(
  persistReducer( persistConfig,
    reduceReducers(
      combineReducers({
        breezy: breezyReducer,
        pages: reduceReducers(pagesReducer, applicationPagesReducer),
      }),
      applicationRootReducer
    )
  ),
  initialState,
  composeEnhancers(applyMiddleware(thunk))
)

persistStore(store)

// This ref is for Breezy's UJS handlers
const navigatorRef = React.createRef()

connect(store)

// Wrap the visit thunk with your own implementation.
const applicationVisit = enhanceVisitWithBrowserBehavior(navigatorRef, (...args) => {
  return store.dispatch((dispatch, getState) => {
    // Do something before
    return visit(...args)(dispatch, getState).finally(() => {
    // Do something after
    })
  })
})

class App extends React.Component {
  //The Nav is bare bones. Feel free to inherit or replace the implementation.
  render() {
    return <Provider store={store}>
      <Nav
        store={store}
        ref={navigatorRef}
        visit={applicationVisit}
        remote={remote}
        mapping={this.props.mapping}
        history={history}
        initialPageKey={initialPageKey}
      />
    </Provider>
  }
}

document.addEventListener("DOMContentLoaded", function() {
  const appEl = document.getElementById('app')
  if (appEl) {
    // Create the ujs event handlers. You can change the ujsAttributePrefix
    // in the event the data attribute conflicts with another.
    const {onClick, onSubmit} = ujsHandlers({
      visit: applicationVisit,
      remote,
      store,
      ujsAttributePrefix: 'data-bz'
    })

    appEl.addEventListener('click', onClick)
    appEl.addEventListener('submit', onSubmit)

    render(<App mapping={identifierToComponentMapping}/>, appEl)
  }
})

@@ -1265,16 +1265,245 @@
 l = ''%0A%0A
+// By using start Breezy will return a reducer, the %60initialState%60 to pass%0A// to redux, the %60initialPageKey%60 to pass to the NavComponent to render the%0A// right page, and a %60connect%60 function to connec the Breezy lib to the store%0A
 const %7Br
@@ -1697,16 +1697,94 @@
 ompose%0A%0A
+// Extract the reducers so that we can add reduceReducers on the pagesReducer%0A
 const %7B%0A
@@ -2582,85 +2582,336 @@
 %0A// 
-This ref is for Breezy's UJS handlers%0Aconst navigatorRef = React.createRef()%0A
+Create a navigator Ref for UJS attributes and to enhance the base visit%0A// implementation with browser like functionality with%0A// enhanceVisitWithBrowserBehavior%0Aconst navigatorRef = React.createRef()%0A%0A// Connect the Breezy internally requires access to the store, use the%0A// provided connect function and pass the created store
 %0Acon
@@ -3109,28 +3109,24 @@
 State) =%3E %7B%0A
-    
 // Do someth
@@ -3136,16 +3136,112 @@
  before%0A
+// e.g, show loading state, you can access the current path%0A// via getState().breezy.currentUrl%0A
     retu
@@ -3294,20 +3294,16 @@
 () =%3E %7B%0A
-    
 // Do so
@@ -3320,138 +3320,476 @@
 ter%0A
-    %7D)%0A  %7D)%0A%7D)%0A%0Aclass App extends React.Component %7B%0A  //The Nav is bare bones. Feel free to inherit or replace the implementation.
+// e.g, hide loading state, you can access the current path%0A// via getState().breezy.currentUrl%0A    %7D)%0A  %7D)%0A%7D)%0A%0A// This is the root component that hold your component. The Nav component is%0A// pretty bare, and you're welcome to replace the implmementation.%0A//%0A// Your modified %60visit%60 and %60remote%60 will get passed to your components through%0A// mapDispatchToProps. You can access them via %60this.props.visit%60 or%0A// %60this.props.remote%60.%0Aclass App extends React.Component %7B
 %0A  r
@@ -4207,20 +4207,16 @@
 ppEl) %7B%0A
-    
 // Creat
@@ -4279,20 +4279,16 @@
 ePrefix%0A
-    
 // in th

Add more documentation to application.js