<template>
	<div class="project-list">
		<div v-if="!projects.length" class="project-list__empty">
			<slot name="empty" />
		</div>
		<w-tabs
			v-else
			ref="tabs"
			v-model="currentPage"
			class="project-list__tabs"
			:items="pageContents"
		>
			<template #item-content="{ item }">
				<div class="project-list__tab">
					<router-link
						v-for="project in item.content"
						:key="project.id"
						:to="project.projectUrl || '/'"
						class="project-tile"
						:class="tileClass(project)"
					> 
						<div
							class="project-tile__cover"
							:style="tileStyle(project)"
						/>
						<div class="project-tile__overlay" />
						<div class="project-tile__title">
							{{ project.name }}

							<authentic-badge 
								v-show="project.isAuthentic"
								class="project-tile__title__badge"
								:color="project.accentColor"
							/>
						</div>
					</router-link>
				</div>
			</template>
		</w-tabs>
		<pagination
			v-if="projects.length > projectsPerPage"
			:value="currentPage"
			:total="pageCount"
			:visible="5"
			class="project-list__pagination"
			@input="openPage"
		/>
	</div>
</template>

<script lang="ts">
import { chunk } from 'lodash';
import AuthenticBadge from './AuthenticBadge.vue';
import Vue from 'vue';

export default Vue.extend({
	name: 'ProjectList',

	components: {
		AuthenticBadge
	},
	props: {
		projects: {
			type: Array,
			required: true
		},
		rows: {
			type: Number,
			required: true
		}
	},

	data: () => ({
		currentPage: 0
	}),

	computed: {
		projectsPerPage(): number {
			return this.rows * 4;
		},
		pageCount(): number {
			return Math.ceil(this.projects.length / this.projectsPerPage);
		},
		pageContents(): any[] {
			const grouped = chunk(this.projects, this.projectsPerPage);

			return grouped.map((group: any[]) => ({
				title: 'Bruh',
				content: group
			}));
		}
	},

	methods: {
		openPage(page: number) {
			const tabs = (this.$refs.tabs as any);

			tabs.openTab({ _index: page });
		},
		tileStyle(project: any): any {
			return project.coverImage ? {
				backgroundImage: `url(${project.coverImage})`
			} : project.accentColor ? {
				backgroundColor: project.accentColor
			} : undefined; 
		},
		tileClass(project: any): any {
			return {
				'project-tile--cover': project.coverImage
			};
		}
	}
});
</script>

<style lang="scss">
.project-list {
	&__tab {
		@include padding(4, t);

		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: 1.25rem;
	}

	&__tabs {
		border: none;

		.w-tabs__bar {
			display: none;
		}

		.w-tabs__content {
			@include padding(0);
		}
	}

	&__pagination {
		@include margin(4, t);
	}
}

.project-tile {
	@include rounded(xl);
	@include padding(4);

	height: 8rem;
	background-color: var(--color-shade-2);
	grid-column: span 12 / span 12;
	background-size: cover;
	position: relative;
	overflow: hidden;
	color: unset;

	@include breakpoint(md) {
		grid-column: span 6 / span 6;
	}

	@include breakpoint(lg) {
		grid-column: span 3 / span 3;
	}

	&__title {
		@include font-weight(bold);

		color: var(--color-negative-4);

		&__badge {
			display: inline-block;
			height: 20px;
			width: 20px;
		}
	}

	.project-tile__overlay {
		@include transition(colors);

		background-color: rgba(0, 0, 0, 0);
		position: absolute;
		inset: 0;
	}

	&:hover .project-tile__overlay {
		background-color: rgba(0, 0, 0, 0.1);
	}

	.project-tile__cover {
		@include transition(transform);

		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		min-height: 5px;
		background-position: center;
		background-size: cover;
		
	}

	&--cover {
		.project-tile__cover {
			bottom: 0;
		}

		.project-tile__title {
			position: relative;
			color: white;
			pointer-events: none;
			text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.6), 1px 1px 9px rgba(75, 75, 75, 0.5);
		}

		.project-tile__overlay {
			background-color: rgba(0, 0, 0, 0.2);
		}

		&:hover .project-tile__cover {
			transform: scale(1.05);
		}
	}
}
</style>