<template>
	<AppContent>
		<Loading v-if="loading" />
		<EmptyContent v-if="failed" :name="t('repod', 'Error loading feed')">
			<template #icon>
				<Alert />
			</template>
		</EmptyContent>
		<Banner v-if="feed" :feed="feed" />
		<Episodes v-if="feed" />
	</AppContent>
</template>

<script lang="ts">
import Alert from 'vue-material-design-icons/Alert.vue'
import AppContent from '../components/Atoms/AppContent.vue'
import Banner from '../components/Feed/Banner.vue'
import EmptyContent from '../components/Atoms/EmptyContent.vue'
import Episodes from '../components/Feed/Episodes.vue'
import Loading from '../components/Atoms/Loading.vue'
import type { PodcastDataInterface } from '../utils/types.ts'
import axios from '@nextcloud/axios'
import { decodeUrl } from '../utils/url.ts'
import { generateUrl } from '@nextcloud/router'
import { t } from '@nextcloud/l10n'

export default {
	name: 'Feed',
	components: {
		Alert,
		AppContent,
		Banner,
		EmptyContent,
		Episodes,
		Loading,
	},
	data: () => ({
		failed: false,
		loading: true,
		feed: null as PodcastDataInterface | null,
	}),
	computed: {
		url() {
			return decodeUrl(this.$route.params.url as string)
		},
	},
	async mounted() {
		try {
			this.loading = true
			const podcastData = await axios.get<PodcastDataInterface>(
				generateUrl('/apps/repod/podcast?url={url}', { url: this.url }),
			)
			this.feed = podcastData.data
		} catch (e) {
			this.failed = true
			console.error(e)
		} finally {
			this.loading = false
		}
	},
	methods: {
		t,
	},
}
</script>
