<template>
	<AppNavigation>
		<template #list>
			<NcAppContentList>
				<router-link to="/discover">
					<NcAppNavigationNew :text="t('repod', 'Add a podcast')">
						<template #icon>
							<PlusIcon :size="20" />
						</template>
					</NcAppNavigationNew>
				</router-link>
				<Loading v-if="loading" />
				<NcAppNavigationList v-if="!loading">
					<Subscription
						v-for="sub of subs.filter((sub) => sub.isFavorite)"
						:key="sub.metrics.url"
						:url="sub.metrics.url" />
					<Subscription
						v-for="sub of subs.filter((sub) => !sub.isFavorite)"
						:key="sub.metrics.url"
						:url="sub.metrics.url" />
				</NcAppNavigationList>
			</NcAppContentList>
		</template>
		<template #footer>
			<Settings />
		</template>
	</AppNavigation>
</template>

<script lang="ts">
import {
	NcAppContentList,
	NcAppNavigationList,
	NcAppNavigationNew,
} from '@nextcloud/vue'
import { mapActions, mapState } from 'pinia'
import AppNavigation from '../Atoms/AppNavigation.vue'
import Loading from '../Atoms/Loading.vue'
import PlusIcon from 'vue-material-design-icons/Plus.vue'
import Settings from '../Settings/Settings.vue'
import Subscription from './Subscription.vue'
import { showError } from '../../utils/toast.ts'
import { t } from '@nextcloud/l10n'
import { useSubscriptions } from '../../store/subscriptions.ts'

export default {
	name: 'Subscriptions',
	components: {
		AppNavigation,
		Loading,
		NcAppContentList,
		NcAppNavigationList,
		NcAppNavigationNew,
		PlusIcon,
		Settings,
		Subscription,
	},
	data: () => ({
		loading: true,
	}),
	computed: {
		...mapState(useSubscriptions, ['subs']),
	},
	async mounted() {
		try {
			await this.fetch()
		} catch (e) {
			console.error(e)
			showError(t('repod', 'Could not fetch subscriptions'))
		} finally {
			this.loading = false
		}
	},
	methods: {
		...mapActions(useSubscriptions, ['fetch']),
		t,
	},
}
</script>
