<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">
					<ProjectTile
						v-for="project in item.content"
						:key="project.id"
						:project="project"
					/>
				</div>
			</template>
		</w-tabs>
		<VindiPagination
			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 Vue from 'vue';

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

	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', // Why is this here lol?
				content: group
			}));
		}
	},

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

			tabs.openTab({ _index: page });
		}
	}
});
</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 {
		grid-column: span 12 / span 12;

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

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