import {installBrowserRouter} from 'routedux';
 import {createStore, applyMiddleware, compose} from 'redux';
 import Vue from 'vue';
 import Revue from 'revue';
 
 const GET_ITEM = 'GET_ITEM';
 const GET_ITEMS = 'GET_ITEMS';
 
 const {middleware, enhancer, init} = installBrowserRouter([
   ['/', 'GET_ITEMS', {}],
   ['/item/:idx', 'GET_ITEM', {}]
 ]);
 
 function reducer(state, action) {
   switch (action.type) {
   case GET_ITEMS:
     return {
       ...state,
       item: null
     };
     break;
   case GET_ITEM:
     return {
       ...state,
       item: state.items[action.idx] || null
     };
     break;
   default:
     return state;
     break;
   }
 }
 
 const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 
 const reduxStore = createStore(reducer, {
   items: [
     {title: "Impending Asteroid collision?", content: "This article is only available to subscribers, please come back later..."},
     {title: "Did the dinosaurs go extinct because of a global hot-sauce shortage?", content: "(Hint) No"}
   ],
   item: null
 }, composeEnhancers(
   enhancer,
   applyMiddleware(
     middleware
   )
 ));
 
 const store = new Revue(Vue, reduxStore, {
 });
 
 init();
 
 const app = new Vue({
   el: "#root",
   data() {
     return {
       items: this.$select('items'),
       item: this.$select('item'),
     };
   },
   methods: {
     getItem(idx) {
       store.dispatch({
         type: GET_ITEM,
         idx
       });
     },
     getItems() {
       store.dispatch({
         type: GET_ITEMS
       });
     }
   }
 });