// The Provider component will be our root component
// It connects our app to the store
const {Provider} = ReactRedux;

// The App component is the root of our app itself.
var App = (props) => 
  <div>
    <h1>Tomb of the Ancients</h1>
    <HeroContainer></HeroContainer>
  </div>

// Hero is a presentational (dumb) component 
// that recieves a hero as a prop and renders it
var Hero = (props) => 
  <div className="hero">
    <h2>{props.hero.name}</h2>
    <pre>
      {JSON.stringify(props, null, 2)}
    </pre>
    <button onClick={
      () => store.dispatch({
        type:"DAMAGE_HERO", 
        value: 1
      })
    }>
      Damage
    </button>
    <button onClick={
      () => store.dispatch({
        type:"HEAL_HERO", 
        value: 10
      })
    }>
      Heal
    </button>
  </div>

// A container (smart) component, that gets heros 
// from the store, and passs them as props to the 
// Heros component
var HeroContainer = ReactRedux.connect(
  (state) => ({hero: state.hero})
)(Hero);

// The initial state for the app
const initialState = {
  hero: {
    name: "Haldane Goodguy", 
    type: "Swordsman", 
    maxHp: 36, 
    hp: 36, 
    armour: 33, 
    attack:12
  },
  monster: {
    name: "Vlad the Bad", 
    type: "Necromancer", 
    maxHp: 300, 
    hp: 300, 
    armour: 28, 
    attack:2
  }
}

/* The Hero Reducer only has to deal with heros */
const heroReducer = (hero=initialState.hero, action) => {
  switch (action.type) {
    case "DAMAGE_HERO":
      return { ...hero, hp:hero.hp - action.value } 
    case "HEAL_HERO": {
      let newHero = {...hero, hp: hero.hp + action.value }
      if (hero.hp > hero.maxHp) { hero.hp = hero.maxHp }
      return newHero
    }
    default:
      return hero    
  }
}

/* The Hero Reducer only has to deal with heros */
const monsterReducer = (monster=initialState.monster, action) => {
  switch (action.type) {
    case "DAMAGE_MONSTER":
      return { ...monster, hp:monster.hp - action.value }
    case "MONSTER_OVERDRIVE": 
      return { ...monster, attack:500, armour:1000 }
    default:
      return monster    
  }
}

/* We create a new reducer by combining other reducers */
const reducer = Redux.combineReducers({
  hero:heroReducer,
  monster:monsterReducer
});

const store = Redux.createStore(reducer);

store.subscribe(() =>
  console.log(store.getState())
)

// setInterval(() => store.dispatch({type:"SET_NAME", value: "Dave"}), 1000);

// setInterval(() => store.dispatch({type:"SET_NAME", value: "Mike"}), 1300);

ReactDOM.render(
  <Provider store={store}>
    <App></App>
 </Provider>, 
  document.getElementById('app'))