<template>
	<NcListItem
		:active="isCurrentEpisode(episode)"
		class="episode"
		:details="
			!oneLine && episode.pubDate
				? formatLocaleDate(new Date(episode.pubDate?.date))
				: ''
		"
		:force-display-actions="true"
		:name="episode.name"
		:one-line="oneLine"
		:style="{ opacity: hasEnded(episode) ? 0.4 : 1 }"
		@click="modalEpisode = episode">
		<template #extra-actions>
			<NcActionButton
				v-if="!isCurrentEpisode(episode)"
				:aria-label="t('repod', 'Play')"
				:title="t('repod', 'Play')"
				@click="load(episode, url)">
				<template #icon>
					<PlayIcon :size="20" />
				</template>
			</NcActionButton>
			<NcActionButton
				v-if="isCurrentEpisode(episode)"
				:aria-label="t('repod', 'Stop')"
				:title="t('repod', 'Stop')"
				@click="load(null)">
				<template #icon>
					<StopIcon :size="20" />
				</template>
			</NcActionButton>
		</template>
		<template #actions>
			<NcActionButton
				v-if="episode.duration"
				:aria-label="t('repod', 'Read')"
				:disabled="loading"
				:model-value="hasEnded(episode)"
				:name="t('repod', 'Read')"
				:title="t('repod', 'Read')"
				@click="read(episode, !hasEnded(episode))">
				<template #icon>
					<PlaylistPlayIcon v-if="!hasEnded(episode)" :size="20" />
					<PlaylistRemoveIcon v-if="hasEnded(episode)" :size="20" />
				</template>
			</NcActionButton>
			<NcActionLink
				v-if="episode.link"
				:href="episode.link"
				:name="t('repod', 'Open website')"
				target="_blank"
				:title="t('repod', 'Open website')">
				<template #icon>
					<OpenInNewIcon :size="20" />
				</template>
			</NcActionLink>
			<NcActionLink
				v-if="episode.url"
				:download="filenameFromUrl(episode.url)"
				:href="episode.url"
				:name="t('repod', 'Download')"
				target="_blank"
				:title="t('repod', 'Download')">
				<template #icon>
					<DownloadIcon :size="20" />
				</template>
			</NcActionLink>
		</template>
		<template #extra>
			<NcModal v-if="modalEpisode" @close="modalEpisode = null">
				<Modal :episode="episode" />
			</NcModal>
		</template>
		<template #icon>
			<NcAvatar
				:display-name="episode.name"
				:is-no-user="true"
				:title="t('repod', 'Select')"
				:url="episode.image"
				@click.stop="$emit('select', episode)">
				<template #icon>
					<CheckIcon v-if="episode.selected" class="progress" :size="20" />
				</template>
			</NcAvatar>
		</template>
		<template #indicator>
			<div class="indicator">
				<NcProgressBar
					v-if="episode.action && isListening(episode) && !oneLine"
					class="progress"
					:value="
						(episode.action.position * 100) / episode.action.total
					" />
				{{ episode.duration }}
			</div>
		</template>
		<template #subname>
			{{ !oneLine ? episode.author : '' }}
		</template>
	</NcListItem>
</template>

<script lang="ts">
import {
	NcActionButton,
	NcActionLink,
	NcAvatar,
	NcListItem,
	NcModal,
	NcProgressBar,
} from '@nextcloud/vue'
import { hasEnded, isListening, markAs } from '../../utils/status.ts'
import { mapActions, mapState } from 'pinia'
import CheckIcon from 'vue-material-design-icons/Check.vue'
import DownloadIcon from 'vue-material-design-icons/Download.vue'
import type { EpisodeInterface } from '../../utils/types.ts'
import Modal from '../Atoms/Modal.vue'
import OpenInNewIcon from 'vue-material-design-icons/OpenInNew.vue'
import PlayIcon from 'vue-material-design-icons/Play.vue'
import PlaylistPlayIcon from 'vue-material-design-icons/PlaylistPlay.vue'
import PlaylistRemoveIcon from 'vue-material-design-icons/PlaylistRemove.vue'
import StopIcon from 'vue-material-design-icons/Stop.vue'
import axios from '@nextcloud/axios'
import { filenameFromUrl } from '../../utils/url.ts'
import { formatLocaleDate } from '../../utils/time.ts'
import { generateUrl } from '@nextcloud/router'
import { showError } from '../../utils/toast.ts'
import { t } from '@nextcloud/l10n'
import { usePlayer } from '../../store/player.ts'

export default {
	name: 'Episode',
	components: {
		CheckIcon,
		DownloadIcon,
		Modal,
		NcActionButton,
		NcActionLink,
		NcAvatar,
		NcListItem,
		NcModal,
		NcProgressBar,
		OpenInNewIcon,
		PlayIcon,
		PlaylistPlayIcon,
		PlaylistRemoveIcon,
		StopIcon,
	},
	props: {
		episode: {
			type: Object as () => EpisodeInterface,
			required: true,
		},
		oneLine: {
			type: Boolean,
			default: false,
		},
		url: {
			type: String,
			required: true,
		},
	},
	emits: ['select'],
	data: () => ({
		loading: false,
		modalEpisode: null as EpisodeInterface | null,
	}),
	computed: {
		...mapState(usePlayer, { playerEpisode: 'episode' }),
	},
	methods: {
		...mapActions(usePlayer, ['load']),
		filenameFromUrl,
		formatLocaleDate,
		hasEnded,
		isListening,
		t,
		isCurrentEpisode(episode: EpisodeInterface) {
			return this.playerEpisode?.url === episode.url
		},
		async read(episode: EpisodeInterface, read: boolean) {
			try {
				this.loading = true
				episode = markAs(episode, read, this.url)
				await axios.post(
					generateUrl('/apps/gpoddersync/episode_action/create'),
					[episode.action],
				)
				if (read && this.isCurrentEpisode(episode)) {
					this.load(null)
				}
			} catch (e) {
				console.error(e)
				showError(t('repod', 'Could not change the status of the episode'))
			} finally {
				this.loading = false
			}
		},
	},
}
</script>

<style scoped>
.progress {
	margin-top: 0.4rem;
}

.indicator {
	display: flex;
	gap: 1rem;
}
</style>

<style>
.episode .list-item-content__subname {
	flex-basis: auto;
	flex-grow: 0;
}
</style>
