<template>
	<div class="project-tasks">
		<div v-if="!taskPages.length" class="project-tasks__empty">
			<ProjectTasksEmptyGraphic
				:color="project.accentColor"
				class=""
			/>
			<h2>
				Manage your tasks
			</h2>
			<p>
				Add tasks to your project to track individual goals and objectives
			</p>
			<w-button
				bg-color="accent-1"
				color="white"
				@click="$emit('createTask')"
			>
				Create task
				<w-icon class="right">
					mdi mdi-plus
				</w-icon>
			</w-button>
		</div>

		<div v-else class="tasks-table container">
			<div class="tasks-table__header" />
			<table>
				<thead>
					<tr>
						<th class="tasks-table__head tasks-table__head--id">
							ID
						</th>
						<th class="tasks-table__head tasks-table__head--summary">
							Summary
						</th>
						<th class="tasks-table__head tasks-table__head--list">
							List
						</th>
						<th class="tasks-table__head tasks-table__head--modified">
							Last modified
						</th>
						<th class="tasks-table__head tasks-table__head--assignees">
							Assignees
						</th>
					</tr>
				</thead>

				<tbody>
					<tr
						v-for="task in taskPages[currentPage]"
						:key="task.id"
					>
						<td class="tasks-table__cell tasks-table__cell--id">
							<w-button
								:style="taskIdStyle"
								bg-color="transparent"
								class="m-0 text-base"
								@click="openTask(task)"
							>
								#{{ task.localId }}	
							</w-button>
						</td>
						<td class="tasks-table__cell tasks-table__cell--summary">
							{{ task.summary }}
						</td>
						<td class="tasks-table__cell tasks-table__cell--list">
							<template v-if="task.list">
								{{ task.list.name }}
							</template>
							<div v-else class="tasks-table__empty">
								-
							</div>
						</td>
						<td class="tasks-table__cell tasks-table__cell--modified">
							{{ formatDate(task) }}
						</td>
						<td class="tasks-table__cell tasks-table__cell--assignees">
							<div class="tasks-table__empty">
								-
							</div>
						</td>
					</tr>
				</tbody>
			</table>
			<Pagination
				v-model="currentPage"
				:total="pageCount"
				:visible="5"
				class="tasks-table__pagination"
			/>
		</div>
	</div>
</template>

<script lang="ts">
import Vue from 'vue';
import dayjs from 'dayjs';
import gql from 'graphql-tag';
import { chunk } from 'lodash';
import { parseSlug } from '~/src/helpers';
import fetchTasksPage from '~/assets/query/tasks/fetchTasksPage.gql';
import { DocumentNode } from 'graphql';

export default Vue.extend({

	async asyncData(context) {
		const result = await context.$api.query(fetchTasksPage, {
			pid: parseSlug(context.params.pid)
		});

		return {
			project: result.project,
			tasks: result.project.tasks
		};
	},

	data: () => ({
		project: null as any,
		tasks: [] as any[],
		manager: null as any,
		currentPage: 0,
		tasksPerPage: 10
	}),

	computed: {
		taskIdStyle(): any {
			return {
				color: this.project.accentColor
			};
		},
		pageCount(): number {
			return Math.ceil(this.tasks.length / this.tasksPerPage);
		},
		taskPages(): any[] {
			return chunk(this.tasks, this.tasksPerPage);
		}
	},

	mounted() {
		this.manager = this.$api.createManager();

		const slug = parseSlug(this.$route.params.pid);

		// Create a simple subscription to detect
		// modifications made to project tasks.
		function createQuery(field: string): DocumentNode {
			return gql`
				subscription ($pid: Int!) {
					${field}(projectId: $pid) {
						id
					}
				}
			`;
		}
		
		this.manager.subscribe({
			query: createQuery('taskCreated'),
			next: this.refetchTasks,
			variables: {
				pid: slug
			}
		});

		this.manager.subscribe({
			query: createQuery('taskUpdated'),
			next: this.refetchTasks,
			variables: {
				pid: slug
			}
		});

		this.manager.subscribe({
			query: createQuery('taskRemoved'),
			next: this.refetchTasks,
			variables: {
				pid: slug
			}
		});
	},

	destroyed() {
		this.manager?.dispose();
	},

	methods: {

		async refetchTasks() {
			const res = await this.$api.query(fetchTasksPage, {
				pid: this.project.id
			});

			this.tasks = res.project.tasks;
		},

		formatDate(task: any): string {
			const lastModified = parseInt(task.lastModifiedAt);
			const dateFormat = this.$t('FULL_DATE_FORMAT') as string;

			return dayjs(lastModified).format(dateFormat);
		},

		openTask(task: any) {
			this.$store.dispatch('openTaskView', task.id);
		}

	}
});
</script>

<style lang="scss">
.project-tasks {
	@include padding(8, x);
	
	max-width: 100vw;
	overflow-x: auto;

	&__empty {
		@include padding(40, t);

		display: flex;
		align-items: center;
		flex-direction: column;

		h2 {
			@include font-size('2xl');
			@include font-weight(medium);
			@include margin(8, t);

			color: #525252;

			@include dark {
				color: white;
			}
		}

		p {
			@include font-size(lg);
			@include margin(3, t);

			color: #a3a3a3;
			text-align: center;
			max-width: 400px;
		}

		.w-button {
			@include margin(6, t);
		}
	}
}

.tasks-table {
	@include rounded('2xl');
	@include padding(0);
	@include padding(2, b);
	@include margin(8, t);

	padding-top: 0;
	overflow: hidden;
	position: relative;
	min-width: 1000px;
	background-color: var(--color-shade-0);

	thead {
		background-color: var(--color-shade-2);
		position: relative;
		height: 2.75rem;
		right: 0;
		left: 0;
		top: 0;
	}

	&__head {
		&--id {
			transform: translateX(4px);
			text-align: center;
			width: 0;
		}

		&--summary {
			text-align: left;
		}

		&--list {
			white-space: nowrap;
			text-align: left;
			width: 0;
		}

		&--modified {
			white-space: nowrap;
			text-align: left;
			width: 0;
		}

		&--assignees {
			white-space: nowrap;
			text-align: left;
			width: 0;
		}
	}

	&__cell {
		&--id {
			@include font-weight(bold);
			@include padding(0, x);

			cursor: pointer;
		}

		&--modified {
			text-align: center;
			white-space: nowrap;
			color: #737373;
			
			@include dark {
				color: #a3a3a3;
			}
		}

		&--assignees {
			@include font-size(xl);

			text-align: center;
			white-space: nowrap;
			color: #737373;
		}
	}

	&__empty {
		@include font-size(xl);

		text-align: center;
		color: gray;
		opacity: 0.3;
	}

	table {
		width: 100%;
		border-collapse: collapse;
		position: relative;

		th, td {
			@include padding(4, x);

			height: 2.75rem;
		}

		td {
			@include padding(3, y);

			border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		}
	}

	&__pagination {
		@include margin(4, t);
		@include margin(2, b);
	}
}
</style>