<template>
	<section class="project-page">
		<ProjectSidebar
			:project="project"
			:get-path="getPath"
			:indicator="viewIndicator"
		/>

		<section class="project-page__wrapper">
			<Toolbar class="project-page__toolbar">
				<w-menu
					custom
					align-left
					hide-on-menu-click
				>
					<template #activator="{ on }">
						<w-button
							class="project-page__options"
							icon="mdi mdi-chevron-down"
							color="gray"
							xl
							v-on="on"
						/>
					</template>
					<div class="list-menu">
						<p class="list-menu__title">
							{{ $t('PROJECT_OPTIONS') }}
						</p>
						<w-divider />
						<div class="list-menu__list">
							<router-link
								:to="getPath('settings')"
								class="list-menu__item project-page__settings-item"
								tag="div"
							>
								<w-icon size="1.1rem" class="left">
									mdi mdi-cog-outline
								</w-icon>
								<div>
									<div>
										Settings
									</div>
									<small>
										Project management
									</small>
								</div>
							</router-link>
							<w-divider />
							<div class="list-menu__item">
								<w-icon size="1.1rem">
									mdi mdi-lightning-bolt
								</w-icon>
								Automation rules
							</div>
							<div
								class="list-menu__item"
								@click="labelsDialog = true"
							>
								<w-icon size="1.1rem">
									mdi mdi-tag-text
								</w-icon>
								Manage labels
							</div>
							<router-link
								:to="getPath('archive')"
								class="list-menu__item"
								tag="div"
							>
								<w-icon size="1.1rem">
									mdi mdi-book
								</w-icon>
								Archive
							</router-link>
							<div class="list-menu__item">
								<w-icon size="1.1rem">
									mdi mdi-bell
								</w-icon>
								Notifications
							</div>

							<w-divider />
							
							<div class="member-list">
								<div class="member-list__header">
									Members
									<spacer />
									<router-link :to="getPath('settings/members')">
										<small class="member-list__edit">
											Manage
										</small>
									</router-link>
								</div>
								<div class="member-list__entries">
									<avatar
										v-for="{ member } in project.members"
										:key="member.id"
										class="-mr-2 block"
										:profile="member"
										:size="30"
									/>
								</div>
							</div>

							<div v-if="project.teams.length > 0" class="member-list">
								<div class="member-list__header">
									Teams
									<spacer />
									<router-link :to="getPath('settings/teams')">
										<small class="member-list__edit">
											Manage
										</small>
									</router-link>
								</div>
								<div class="member-list__entries">
									<team-icon
										v-for="{ team } in project.teams"
										:key="team.id"
										class="mr-1 block"
										:team="team"
										:size="30"
									/>
								</div>
							</div>
						</div>
					</div>
				</w-menu>

				<div class="project-page__info">
					<h1 class="project-page__name">
						{{ project.name }}
						<i class="mdi mdi-star" />
					</h1>
					<small
						v-if="view"
						class="project-page__view"
					>
						{{ $t(view.name) }}
					</small>
				</div>

				<template #creation-list>
					<div
						class="list-menu__item"
					>
						<w-icon size="1.1rem">
							mdi mdi-text-box-check
						</w-icon>
						{{ $t('TOOLBAR_CREATE_TASK') }}
						<p class="text-gray-400">
							{{ $t('TOOLBAR_CREATE_TASK_DESC') }}
						</p>
					</div>
				</template>
			</Toolbar>

			<main role="main" class="project-page__content">
				<keep-alive>
					<NuxtChild
						:project="project"
						@createTask="createTask"
					/>
				</keep-alive>
			</main>

			<!-- ANCHOR Labels dialog -->
			<!-- <w-dialog
				v-model="labelsDialog"
				dialog-class="rounded-xl dark:bg-gray-800"
				width="500"
			>
				<labels-manager />
			</w-dialog> -->
		</section>
	</section>
</template>

<script lang="ts">
import Vue from "vue";
import fetchProjectPage from '~/assets/query/project/fetchProjectPage.gql';
import { parseSlug } from '~/src/helpers';
import gql from "graphql-tag";
import { ProjectView } from "~/registry/projectViews";
import { Optional } from "~/typings/helpers";

export default Vue.extend({
	layout: 'empty',

	async asyncData(context) {
		const pid = parseSlug(context.params.pid);

		// Assert project existence
		if(pid == undefined) {
			context.error({
				statusCode: 404,
				message: 'Project not found'
			});
			return;
		}

		// Accept project invitation
		if(context.query.accept) {
			await context.$api.query(gql`
				mutation ProjectAcceptInvite($id: Int!) {
					acceptProjectInvitation(id: $id)
				}
			`, {
				id: pid
			});

			context.redirect(context.route.path);
			return;
		}

		// TODO Fetch the task lists on the fly or
		// keep the lists up to date w/ subscriptions
		const res = await context.$api.query(fetchProjectPage, {
			pid: pid
		});

		const project = res.project;

		if(!project) {
			context.error({
				statusCode: 404,
				message: 'Project not found'
			});
			return;
		}
		
		// Initial view indicator position
		const views = context.$registries.projectViews;
		const segments = context.route.matched[1].path.split('/');
		const viewInstance = views.get(segments[segments.length - 1]);
		const indicator = viewInstance ? views.toArray().indexOf(viewInstance) : -1;

		return {
			view: viewInstance,
			viewIndicator: indicator,
			project: project
		};
	},

	data: () => ({
		view: null as unknown as Optional<ProjectView>,
		project: {} as any,
		viewIndicator: 0,
		labelsDialog: false
	}),

	watch: {
		'$route'() {
			this.updateIndicator();
		}
	},

	methods: {

		getPath(path?: string): string {
			return `/project/${this.$route.params.pid}/${path || ''}`;
		},

		updateIndicator() {
			const views = this.$registries.projectViews;
			const segments = this.$route.matched[1].path.split('/');
			const viewInstance = views.get(segments[segments.length - 1]);

			this.view = viewInstance;

			if(!viewInstance) {
				this.viewIndicator = -1;
			} else {
				this.viewIndicator = views.toArray().indexOf(viewInstance);
			}
		},

		createTask() {
			this.$store.commit('setCurrentTask', {
				id: undefined,
				summary: '',
				project: this.project
			});
		}
		
	}
});
</script>

<style lang="scss">
.project-page {
	display: flex;
	min-height: 100vh;

	&__wrapper {
		display: flex;
		flex-direction: column;
		flex-grow: 1;
		min-width: 0;
	}

	&__toolbar {
		.mdi-star {
			@include margin(1, l);

			color: rgb(251, 191, 36);
			font-size: 1.1rem;
		}
	}

	&__settings-item {
		display: flex;
		align-items: center;
		line-height: 1rem;
	}

	&__options {
		@include margin(3, x);

		color: #404040
	}

	&__info {
		display: flex;
		flex-direction: column;
	}

	&__name {
		@include font-weight(bold);
	}

	&__view {
		@include font-weight(thin);
		@include margin(-1, t);
	}

	&__content {
		flex-grow: 1;
	}
}

.member-list {
	&__header {
		@include padding(3, x);
		@include padding(1, b);
		@include margin(2, t);
		@include font-weight(semibold);

		color: #35353a;
		display: flex;
		align-items: center;

		@include dark {
			color: #e5e5e5;
		}
	}

	&__edit {
		@include font-weight(medium);

		text-decoration: underline;
		cursor: pointer;
		color: #737373;
	}

	&__entries {
		@include padding(3, x);
		@include padding(2, b);

		display: flex;
		flex-wrap: wrap;
	}
}
</style>