import 'babel-polyfill';
import axios from 'axios';
import { fromJS } from 'immutable';
import { createStore } from 'actionizer';
import { select, call, reduce, fork, cancel, delegate } from 'actionizer/commands';
import debounce from 'lodash.debounce';

const initialState = fromJS({
  counter: 0,
  items: {
    1: {id: 1, name: 'hoge'},
    2: {id: 2, name: 'fuga'}
  }
});

// Customize notifier.
const notify = debounce((emit) => { emit(); });

// Create "Store", it treats states for the app.
const store = createStore(initialState, notify);

// Define "Reducer"
const setCount = (state, num) => state.set('counter', num);

// Define "Action Creator".
const count = function*(num) {
  // Get current state.
  const state = yield select();

  // Update state by "Reducer"
  yield reduce(setCount, num);
}

// API request.
const getItems = (id, field) => {
  return axios.get('/items', {id, field});
};

// Define asynchronous "Action Creator".
const fetchItems = function*(id, field) {
  try {
    // "call" receives a function and arguments that returns a promise.
    const result = yield call(getItems, id, field);

    // Do something...
  } catch(e) {
    // Do something...
  }
}

const sleep = (ms) => {
  return new Promise((resolve) => {
    setTimeout(() => { resolve(); }, ms);
  });
};

// Define debounced "Action Creator".
const debouncedFetchItems = function*(id) {
  yield call(sleep, 1000);
  // Delegate other action creator
  yield delegate(fetchItems, id);
}
let actionId;
const searchItemsById = function*(id) {
  yield cancel(actionId);
  actionId = yield fork(debouncedFetchItems, id);
}

// Subscribe store's change.
const unsubscribe = store.subscribe((state) => {
  console.log(`listener: ${state.get('counter')}`);
});

// Dispatch "Action".
store.dispatch(count(100));

// => listener: 100

// Unsubscribe store's change.
unsubscribe();

// This is "Action Creator"
const count = function*(num) {
  yield reduce(setCount, num);
}

// This is "Action"
const action = count(1);