import { GetUserAnime } from '@/domain'
import { RootState } from '@/store'
import { BareActionContext, getStoreBuilder } from 'vuex-typex'

export interface UserAnimeState {
	userAnime: Meikan.UserAnime[]
}

const initialState: UserAnimeState = {
	userAnime: [],
}
const builder = getStoreBuilder<RootState>().module('userAnime', initialState)

// Getters
const getterUserAnime = builder.read(function anime(state: UserAnimeState) {
	return state.userAnime
})

// Mutations
function setAnime(state: UserAnimeState, animeList: Meikan.UserAnime[]) {
	state.userAnime = animeList
}

// Action
async function fetchUserAnime(context: BareActionContext<UserAnimeState, RootState>, user: Meikan.User) {
	const list = await GetUserAnime(user.id)

	userAnimeState.setAnime(list)
}

function resetUserAnime(context: BareActionContext<UserAnimeState, RootState>) {
	userAnimeState.setAnime([])
}

export const userAnimeState = {
	get anime(): Meikan.UserAnime[] {
		return getterUserAnime()
	},

	setAnime: builder.commit(setAnime),
	fetchUserAnime: builder.dispatch(fetchUserAnime),
	resetUserAnime: builder.dispatch(resetUserAnime),
}