import { GetterTree, MutationTree, ActionTree } from 'vuex'
import { GET_TEAM_ENDPOINT_URL, TeamMember } from '~/types'

export const state = () => ({
  members: [] as TeamMember[],
})

export type RootState = ReturnType<typeof state>

export const getters: GetterTree<RootState, RootState> = {
  members: state => state.members,
  userToMember: (state: RootState, { user }) => {
    const loggedInUserId = user?.id as number
    return state.members.find((m: TeamMember) => m.userId === loggedInUserId)
      ?.id
  },
}

export const mutations: MutationTree<RootState> = {
  ADD_TASK(state: any, member: TeamMember) {
    state.members.push(member)
  },
  ADD_MEMBERS(state: any, members: TeamMember[]) {
    state.members.push(...members)
  },
  SET_MEMBERS(state: any, members: TeamMember[]) {
    state.members = members
  },
  REMOVE_MEMBER(state: any, member: TeamMember) {
    state.members.splice(state.members.indexOf(member), 1)
  },
  REPLACE_MEMBER(state: any, member: TeamMember) {
    const index = state.members.findIndex((t: TeamMember) => t.id === member.id)
    state.members.splice(index, 1, member)
  },
}

export const actions: ActionTree<RootState, RootState> = {
  async fetchMembers({ commit }) {
    const members = await this.$axios.$get(GET_TEAM_ENDPOINT_URL)
    commit('SET_MEMBERS', members)
  },
  // TODO: Add type for parameter
  async createMember({ commit }, MemberCreationForm: any) {
    const newMember = await this.$axios.$post(
      '/dashboard/api/v1/team/member',
      MemberCreationForm,
    )
    commit('ADD_MEMBER', newMember)
  },
  async updateMember({ commit }, member: TeamMember) {
    const updatedMember = await this.$axios.$put(
      `/dashboard/api/v1/team/member/${member.id}`,
      member,
    )

    commit('REPLACE_MEMBER', updatedMember)
  },
}