import { GetterTree, MutationTree, ActionTree } from 'vuex'
import { ChatMessage } from '~/types/chat'

export const state = () => ({
  pendingMessages: [] as ChatMessage[],
})

export type RootState = ReturnType<typeof state>

export const getters: GetterTree<RootState, RootState> = {
  pendingMessages: state => state.pendingMessages,
  pendingMessageIds: state => state.pendingMessages.map(m => m.id),
}

export const mutations: MutationTree<RootState> = {
  ADD_PENDING_MESSAGE(state: any, message: ChatMessage) {
    state.pendingMessages.push(message)
  },
  CLEAR_PENDING_MESSAGES(state: any) {
    state.pendingMessages = []
  },
}

export const actions: ActionTree<RootState, RootState> = {
  addPendingMessage({ commit }, message: ChatMessage) {
    commit('ADD_PENDING_MESSAGE', message)
  },
  clearMessages({ commit }) {
    commit('CLEAR_MESSAGES')
  },
}