<template>
	<md-table v-model="anime">
		<md-table-toolbar>
			<h1 class="md-title md-toolbar-section-start">{{ currentUser.name }}'s anime</h1>
			<md-button 
				class="md-icon-button md-primary"
				@click="refresh"
			>
				<md-icon>refresh</md-icon>
			</md-button>
		</md-table-toolbar>
		<md-table-empty-state>
			<md-progress-spinner class="md-accent" md-mode="indeterminate"></md-progress-spinner>
		</md-table-empty-state>
		<md-table-row slot="md-table-row" slot-scope="{ item }">
			<md-table-cell md-label="#" md-numeric width="100">{{ item.anime.id }}</md-table-cell>
			<md-table-cell md-label="Title" md-sort-by="title">{{ item.anime.title }}</md-table-cell>
		</md-table-row>
	</md-table>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { namespace } from 'vuex-class'

const user = namespace('user')
const userAnime = namespace('userAnime')

@Component({})
export default class Home extends Vue {
	@user.Getter
	private currentUser!: User

	@userAnime.Action
	private resetUserAnime!: () => void

	@userAnime.Action
	private fetchUserAnime!: (user: User) => Promise<UserAnime[]>

	@userAnime.Getter
	private anime!: UserAnime[]

	private created() {
		if (this.anime.length === 0) {
			this.fetchUserAnime(this.currentUser)
		}
	}

	private refresh() {
		this.resetUserAnime()
		this.fetchUserAnime(this.currentUser)
	}
}
</script>
