import { ActionTree, GetterTree, Module, MutationTree } from 'vuex';
import RootState from '../types/RootStateModel';
import AlertStoreModel, { AlertModel, AlertTypes } from '../types/AlertStoreModel';

const namespaced = true;

const state: AlertStoreModel = {
  all: [],
};

const actions: ActionTree<AlertStoreModel, RootState> = {
  addWarning({ dispatch }, message: string): void {
    const alert: AlertModel = {
      type: AlertTypes.Warning,
      html: message,
    };

    dispatch('add', alert);
  },
  addSuccess({ dispatch }, message: string): void {
    const alert: AlertModel = {
      type: AlertTypes.Success,
      html: message,
    };

    dispatch('add', alert);
  },
  addInfo({ dispatch }, message: string): void {
    const alert: AlertModel = {
      type: AlertTypes.Info,
      html: message,
    };

    dispatch('add', alert);
  },
  addError({ dispatch }, message: string): void {
    const alert: AlertModel = {
      type: AlertTypes.Danger,
      html: message,
    };

    dispatch('add', alert);
  },
  add({ commit }, alert: AlertModel): void {
    commit('add', alert);

    // auto-remove added alerts
    setTimeout(() => {
      commit('remove', alert);
    }, 10 * 1000);
  },
  remove({ commit }, alert: AlertModel): void {
    commit('remove', alert);
  },
};

const getters: GetterTree<AlertStoreModel, RootState> = {};

const mutations: MutationTree<AlertStoreModel> = {
  add(state: AlertStoreModel, alert: AlertModel) {
    state.all.push(alert);
  },
  remove(state: AlertStoreModel, alert: AlertModel) {
    const index = state.all.indexOf(alert);

    state.all.splice(index, 1);
  },
};

export const alertStore: Module<AlertStoreModel, RootState> = {
  namespaced,
  state,
  getters,
  actions,
  mutations,
};