<template>
	<div class="home">
		<div class="content-inner">
			<div
				v-if="config.campaigns.home"
				class="campaign-container"
			>
				<Campaign
					:min-ratio="6"
				/>
			</div>

			<FilterBar
				ref="filter"
				:fetch-releases="fetchReleases"
				:show-filters="false"
				:items-total="totalCount"
				:items-per-page="limit"
				:content="$refs.content"
				:show-total="false"
			/>

			<Releases
				:releases="releases"
				:done="done"
			/>

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

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

<script>
import config from 'config';

import FilterBar from '../filters/filter-bar.vue';
import Releases from '../releases/releases.vue';
import Pagination from '../pagination/pagination.vue';
import Campaign from '../campaigns/campaign.vue';

async function fetchReleases(scroll = true) {
	this.done = false;

	const { releases, totalCount } = await this.$store.dispatch('fetchReleases', {
		limit: this.limit,
		range: this.$route.params.range,
		pageNumber: Number(this.$route.params.pageNumber) || 1,
	});

	this.totalCount = totalCount;
	this.releases = releases;
	this.done = true;

	if (scroll) {
		this.$refs.filter?.$el.scrollIntoView();
	}
}

async function mounted() {
	this.pageTitle = '';

	await this.fetchReleases();
}

export default {
	components: {
		Campaign,
		FilterBar,
		Releases,
		Pagination,
	},
	data() {
		return {
			releases: [],
			networks: [],
			pageTitle: null,
			limit: Number(this.$route.query.limit || 30) - config.campaigns.tiles, // reserve one campaign spot
			totalCount: 0,
			from: null,
			done: false,
		};
	},
	watch: {
		$route: fetchReleases,
		'$store.state.ui.tagFilter': fetchReleases,
	},
	mounted,
	methods: {
		fetchReleases,
	},
};
</script>

<style lang="scss" scoped>
.home {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.campaign-container {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: .75rem 1rem .25rem 1rem;
	background: var(--background-dim);
}
</style>