<template>
	<div
		v-if="tag"
		class="tag content"
	>
		<div class="header">
			<h2 class="title">
				<Icon icon="price-tag4" />
				{{ tag.name }}
			</h2>
		</div>

		<div class="content-inner">
			<div
				v-if="description"
				class="description header-description"
				v-html="description"
			/>

			<Scroll
				v-if="hasMedia"
				v-slot="scroll"
				:expanded="expanded"
				class="scroll-dark"
				@expand="(state) => expanded = state"
			>
				<Photos
					:tag="tag"
					:class="{ expanded }"
					@load="scroll.loaded"
				/>
			</Scroll>

			<FilterBar
				ref="filter"
				:fetch-releases="fetchReleases"
			/>

			<Releases :releases="releases" />

			<Pagination
				:items-total="totalCount"
				:items-per-page="limit"
				class="pagination-bottom"
			/>

			<Footer />
		</div>
	</div>
</template>

<script>
/* eslint-disable no-v-html */
import { Converter } from 'showdown';

import escapeHtml from '../../../src/utils/escape-html';

import FilterBar from '../filters/filter-bar.vue';
import Photos from './photos.vue';
import Releases from '../releases/releases.vue';
import Pagination from '../pagination/pagination.vue';
import Scroll from '../scroll/scroll.vue';

const converter = new Converter();

async function fetchReleases() {
	const { tag, releases, totalCount } = await this.$store.dispatch('fetchTagBySlug', {
		tagSlug: this.$route.params.tagSlug,
		pageNumber: Number(this.$route.params.pageNumber),
		limit: this.limit,
		range: this.$route.params.range,
	});

	this.tag = tag;
	this.releases = releases;
	this.totalCount = totalCount;

	this.hasMedia = this.tag.poster || this.tag.photos.length > 0;
	this.description = this.tag.description && converter.makeHtml(escapeHtml(this.tag.description));

	this.$refs.filter.$el.scrollIntoView();
}

async function mounted() {
	await this.fetchReleases();
	this.pageTitle = this.tag.name;
}

export default {
	components: {
		FilterBar,
		Releases,
		Photos,
		Pagination,
		Scroll,
	},
	data() {
		return {
			tag: null,
			description: null,
			releases: null,
			totalCount: 0,
			limit: 20,
			pageTitle: null,
			hasMedia: false,
			expanded: false,
		};
	},
	watch: {
		$route: fetchReleases,
		'$store.state.ui.tagFilter': fetchReleases,
	},
	mounted,
	methods: {
		fetchReleases,
	},
};
</script>

<style lang="scss">
@import 'theme';

.description a {
    color: var(--link);
    text-decoration: inherit;

    &:hover {
        color: var(--primary);
    }
}

.description,
.description p {
    padding: 0;
    margin: 0;
}
</style>

<style lang="scss" scoped>
@import 'theme';

.header {
    background: var(--profile);
    color: var(--text-light);
    justify-content: space-between;
}

.title {
    padding: .5rem 1rem;
    margin: 0;
    flex-shrink: 0;
    text-transform: capitalize;

    .icon {
        fill: var(--text-light);
        width: 1.25rem;
        height: 1.25rem;
    }
}

.description {
	padding: 0 1rem .5rem 1rem;
    line-height: 1.5;
	color: var(--text-light);
	background: var(--profile);
}

.scroll {
	background: var(--background-dim);
}
</style>
