<template>
	<NcContent app-name="repod">
		<GPodder v-if="!gpodder" />
		<Subscriptions v-if="gpodder" />
		<router-view v-if="gpodder" :key="$route.path" />
		<Bar />
	</NcContent>
</template>

<script lang="ts">
import 'toastify-js/src/toastify.css'
import { mapActions, mapState } from 'pinia'
import Bar from './components/Player/Bar.vue'
import GPodder from './views/GPodder.vue'
import { NcContent } from '@nextcloud/vue'
import Subscriptions from './components/Sidebar/Subscriptions.vue'
import { loadState } from '@nextcloud/initial-state'
import { usePlayer } from './store/player.ts'

export default {
	name: 'App',
	components: {
		Bar,
		GPodder,
		NcContent,
		Subscriptions,
	},
	computed: {
		...mapState(usePlayer, ['paused']),
		gpodder() {
			return loadState('repod', 'gpodder', false)
		},
	},
	mounted() {
		this.init()
	},
	methods: {
		...mapActions(usePlayer, ['init']),
	},
}
</script>