<template>
	<div
		ref="page"
		class="notifications-container"
	>
		<h1 class="heading">Notifications</h1>

		<ul class="notifications nolist">
			<li
				v-for="notification in notifications"
				:key="notification.id"
			>
				<SceneTile :release="notification.scene" />
			</li>
		</ul>

		<Pagination
			:items-total="totalCount"
			:items-per-page="10"
		/>
	</div>
</template>

<script>
import Pagination from '../pagination/pagination.vue';
import SceneTile from '../releases/scene-tile.vue';

async function fetchNotifications() {
	const { notifications, totalCount, unseenCount } = await this.$store.dispatch('fetchNotifications', {
		page: this.$route.params.pageNumber,
		limit: this.limit,
	});

	this.notifications = notifications;
	this.unseenNotificationsCount = unseenCount;
	this.totalCount = totalCount;

	this.$emit('scroll');
}

export default {
	components: {
		Pagination,
		SceneTile,
	},
	data() {
		return {
			notifications: [],
			limit: 10,
			totalCount: 0,
			unseenNotificationsCount: 0,
		};
	},
	emits: ['scroll'],
	watch: {
		$route: fetchNotifications,
	},
	mounted: fetchNotifications,
};
</script>

<style lang="scss" scoped>
.notifications-container {
	padding: 1rem;
}

.notifications {
	display: grid;
    grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
	grid-gap: .5rem;
}

.pagination {
	margin: 1rem 0 0 0;
}
</style>