<template>
	<NcAppNavigation>
		<NcAppContentList>
			<router-link to="/">
				<NcAppNavigationNew :text="t('repod', 'Add a podcast')">
					<template #icon>
						<Plus :size="20" />
					</template>
				</NcAppNavigationNew>
			</router-link>
			<Loading v-if="loading" />
			<AdaptativeList v-if="!loading">
				<Item v-for="subscriptionUrl of subscriptions"
					:key="subscriptionUrl"
					:url="subscriptionUrl" />
			</AdaptativeList>
		</NcAppContentList>
	</NcAppNavigation>
</template>

<script>
import { NcAppContentList, NcAppNavigation, NcAppNavigationNew } from '@nextcloud/vue'
import AdaptativeList from '../Atoms/AdaptativeList.vue'
import Item from './Item.vue'
import Loading from '../Atoms/Loading.vue'
import Plus from 'vue-material-design-icons/Plus.vue'
import { showError } from '@nextcloud/dialogs'

export default {
	name: 'Subscriptions',
	components: {
		AdaptativeList,
		Item,
		Loading,
		NcAppContentList,
		NcAppNavigation,
		NcAppNavigationNew,
		Plus,
	},
	data() {
		return {
			loading: true,
		}
	},
	computed: {
		currentEpisode() {
			return this.$store.state.player.episode
		},
		subscriptions() {
			return this.$store.state.subscriptions.subscriptions
		},
	},
	async mounted() {
		try {
			await this.$store.dispatch('subscriptions/fetch')
		} catch (e) {
			console.error(e)
			showError(t('repod', 'Could not fetch subscriptions'))
		} finally {
			this.loading = false
		}
	},
}
</script>
