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

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

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

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

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

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

	userAnime.setAnime(list)
}

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

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

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