<template>
	<AppNavigation>
		<template #list>
			<NcAppContentList>
				<router-link to="/">
					<NcAppNavigationNew :text="t('repod', 'Add a podcast')">
						<template #icon>
							<Plus :size="20" />
						</template>
					</NcAppNavigationNew>
				</router-link>
				<Loading v-if="loading" />
				<ul v-if="!loading">
					<Item v-for="subscriptionUrl of subscriptions"
						:key="subscriptionUrl"
						:url="subscriptionUrl" />
				</ul>
			</NcAppContentList>
		</template>
		<template #footer>
			<NcAppNavigationSettings>
				<Filters />
				<Speed />
				<Import />
				<Export />
				<List />
				<Stats />
			</NcAppNavigationSettings>
		</template>
	</AppNavigation>
</template>

<script>
import { NcAppContentList, NcAppNavigationNew, NcAppNavigationSettings } from '@nextcloud/vue'
import AppNavigation from '../Atoms/AppNavigation.vue'
import Export from '../Settings/Export.vue'
import Filters from '../Settings/Filters.vue'
import Import from '../Settings/Import.vue'
import Item from './Item.vue'
import List from '../Settings/List.vue'
import Loading from '../Atoms/Loading.vue'
import Plus from 'vue-material-design-icons/Plus.vue'
import Speed from '../Settings/Speed.vue'
import Stats from '../Settings/Stats.vue'
import { showError } from '@nextcloud/dialogs'

export default {
	name: 'Subscriptions',
	components: {
		AppNavigation,
		Export,
		Filters,
		Import,
		Item,
		List,
		Loading,
		NcAppContentList,
		NcAppNavigationNew,
		NcAppNavigationSettings,
		Plus,
		Speed,
		Stats,
	},
	data() {
		return {
			loading: true,
		}
	},
	computed: {
		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>
