<template>
	<div v-if="track">
		<section class="ui vertical stripe segment">
			<div class="ui stackable grid row container">
				<div class="six wide column">
					<template v-if="upload">
						<img
							v-if="track.cover && track.cover.urls.large_square_crop"
							v-lazy="
								$store.getters['instance/absoluteUrl'](
									track.cover.urls.large_square_crop
								)
							"
							alt="Cover Image"
							class="ui fluid image track-cover-image"
						/>
						<img
							v-else-if="
								track.album &&
								track.album.cover &&
								track.album.cover.urls.large_square_crop
							"
							v-lazy="
								$store.getters['instance/absoluteUrl'](
									track.album.cover.urls.large_square_crop
								)
							"
							alt="Cover Image"
							class="ui fluid image track-cover-image"
						/>
						<img
							v-else
							src="../../assets/embed/default-cover.jpeg"
							alt="Cover Image"
							class="ui fluid image track-cover-image"
						/>
						<h3 class="ui header">
							<translate
								v-if="track.artist.content_category === 'music'"
								key="1"
								translate-context="Content/*/*"
							>
								Track Details
							</translate>
							<translate v-else key="2" translate-context="Content/*/*">
								Episode Details
							</translate>
						</h3>
						<table class="ui basic table">
							<tbody>
								<tr>
									<td>
										<translate translate-context="Content/*/*">
											Duration
										</translate>
									</td>
									<td class="right aligned">
										<template v-if="upload.duration">
											{{ upload.duration | duration }}
										</template>
										<translate v-else translate-context="*/*/*">
											N/A
										</translate>
									</td>
								</tr>
								<tr>
									<td>
										<translate translate-context="Content/*/*/Noun">
											Size
										</translate>
									</td>
									<td class="right aligned">
										<template v-if="upload.size">
											{{ upload.size | humanSize }}
										</template>
										<translate v-else translate-context="*/*/*">
											N/A
										</translate>
									</td>
								</tr>
								<tr>
									<td>
										<translate translate-context="Content/*/*/Noun">
											Codec
										</translate>
									</td>
									<td class="right aligned">
										<template v-if="upload.extension">
											{{ upload.extension }}
										</template>
										<translate v-else translate-context="*/*/*">
											N/A
										</translate>
									</td>
								</tr>
								<tr>
									<td>
										<translate translate-context="Content/Track/*/Noun">
											Bitrate
										</translate>
									</td>
									<td class="right aligned">
										<template v-if="upload.bitrate">
											{{ upload.bitrate | humanSize }}/s
										</template>
										<translate v-else translate-context="*/*/*">
											N/A
										</translate>
									</td>
								</tr>
								<tr>
									<td>
										<translate translate-context="Content/*/*">
											Downloads
										</translate>
									</td>
									<td class="right aligned">
										{{ track.downloads_count }}
									</td>
								</tr>
							</tbody>
						</table>
					</template>
				</div>
				<div class="ten wide column">
					<template v-if="track.tags && track.tags.length > 0">
						<tags-list :tags="track.tags" />
						<div class="ui hidden divider" />
					</template>

					<rendered-description
						:content="track.description"
						:can-update="false"
					/>
					<h2 class="ui header">
						<translate translate-context="Content/*/*">
							Release Details
						</translate>
					</h2>
					<table class="ui basic table ellipsis-rows">
						<tbody>
							<tr>
								<td>
									<translate translate-context="*/*/*/Noun"> Artist </translate>
								</td>
								<td class="right aligned">
									<router-link
										:to="{
											name: 'library.artists.detail',
											params: { id: track.artist.id },
										}"
									>
										{{ track.artist.name }}
									</router-link>
								</td>
							</tr>
							<tr v-if="track.album">
								<td>
									<translate
										v-if="track.album.artist.content_category === 'music'"
										key="1"
										translate-context="*/*/*/Noun"
									>
										Album
									</translate>
									<translate v-else key="2" translate-context="*/*/*">
										Serie
									</translate>
								</td>
								<td class="right aligned">
									<router-link
										:to="{
											name: 'library.albums.detail',
											params: { id: track.album.id },
										}"
									>
										{{ track.album.title }}
									</router-link>
								</td>
							</tr>
							<tr>
								<td>
									<translate translate-context="*/*/*"> Year </translate>
								</td>
								<td class="right aligned">
									<template v-if="track.album && track.album.release_date">
										{{ track.album.release_date | moment("Y") }}
									</template>
									<template v-else>
										<translate translate-context="*/*/*"> N/A </translate>
									</template>
								</td>
							</tr>
							<tr>
								<td>
									<translate translate-context="Content/Track/*/Noun">
										Copyright
									</translate>
								</td>
								<td class="right aligned">
									<span v-if="track.copyright" :title="track.copyright">{{
										track.copyright | truncate(50)
									}}</span>
									<template v-else>
										<translate translate-context="*/*/*"> N/A </translate>
									</template>
								</td>
							</tr>
							<tr>
								<td>
									<translate translate-context="Content/*/*/Noun">
										License
									</translate>
								</td>
								<td class="right aligned">
									<a
										v-if="license"
										:href="license.url"
										target="_blank"
										rel="noopener noreferrer"
										>{{ license.name }}</a
									>
									<translate v-else translate-context="*/*/*"> N/A </translate>
								</td>
							</tr>
							<tr v-if="!track.is_local">
								<td>
									<translate translate-context="Content/*/*/Noun">
										URL
									</translate>
								</td>
								<td :title="track.fid">
									<a
										:href="track.fid"
										target="_blank"
										rel="noopener noreferrer"
									>
										{{ track.fid | truncate(65) }}
									</a>
								</td>
							</tr>
						</tbody>
					</table>
					<a
						v-if="musicbrainzUrl"
						:href="musicbrainzUrl"
						target="_blank"
						rel="noreferrer noopener"
					>
						<i class="external icon" />
						<translate translate-context="Content/*/*/Clickable, Verb"
							>View on MusicBrainz</translate
						>
					</a>
					<h2 class="ui header">
						<translate translate-context="Content/*/Title/Noun">
							Related Playlists
						</translate>
					</h2>
					<playlist-widget
						:url="'playlists/'"
						:filters="{
							track: track.id,
							playable: true,
							ordering: '-modification_date',
						}"
					/>

					<h2 class="ui header">
						<translate translate-context="Content/*/Title/Noun">
							Related Libraries
						</translate>
					</h2>
					<library-widget
						:url="'tracks/' + id + '/libraries/'"
						@loaded="$emit('libraries-loaded', $event)"
					>
						<translate
							slot="subtitle"
							translate-context="Content/Track/Paragraph"
						>
							This track is present in the following libraries:
						</translate>
					</library-widget>
				</div>
			</div>
		</section>
	</div>
</template>

<script>
import axios from "axios";
import LibraryWidget from "@/components/federation/LibraryWidget";
import TagsList from "@/components/tags/List";
import PlaylistWidget from "@/components/playlists/Widget";

export default {
	components: {
		LibraryWidget,
		TagsList,
		PlaylistWidget,
	},
	props: {
		track: { type: Object, required: true },
		libraries: { type: Array, default: null },
	},
	data() {
		return {
			id: this.track.id,
			licenseData: null,
		};
	},
	computed: {
		labels() {
			return {
				title: this.$pgettext("*/*/*/Noun", "Track"),
			};
		},
		musicbrainzUrl() {
			if (this.track.mbid) {
				return "https://musicbrainz.org/recording/" + this.track.mbid;
			}
			return null;
		},
		upload() {
			if (this.track.uploads) {
				return this.track.uploads[0];
			}
			return null;
		},
		license() {
			if (!this.track || !this.track.license) {
				return null;
			}
			return this.licenseData;
		},
		cover() {
			if (this.track.cover && this.track.cover.urls.original) {
				return this.track.cover;
			}
			if (this.track.album && this.track.album.cover) {
				return this.track.album.cover;
			}
			return null;
		},
	},
	watch: {
		track(v) {
			if (v && v.license) {
				this.fetchLicenseData(v.license);
			}
		},
	},
	created() {
		if (this.track && this.track.license) {
			this.fetchLicenseData(this.track.license);
		}
	},
	methods: {
		fetchLicenseData(licenseId) {
			const self = this;
			const url = `licenses/${licenseId}`;
			axios.get(url).then((response) => {
				self.licenseData = response.data;
			});
		},
	},
};
</script>
