<template>
	<section class="project-home-page">
		<div class="project-home-page__header">
			<Container class="project-home-info">
				<div
					class="project-home-info__bar"
					:style="titleBarStyle"
				/>
				<div class="project-home-info__content">
					<h1 class="project-home-info__title">
						{{ project.name }}

						<w-tooltip
							v-if="project.isAuthentic"
							top
						>
							<template #activator="{ on }">
								<div 
									class="project-home-info__authentic" 
									v-on="on"
								>
									<AuthenticBadge
										:color="project.accentColor"
									/>
								</div>
							</template>
							Authentic Project
						</w-tooltip>

						<w-tooltip
							v-if="project.isPublic"
							top
						>
							<template #activator="{ on }">
								<w-icon
									class="project-home-info__badge"
									color="misc-0"
									lg
									v-on="on"
								>
									mdi mdi-earth
								</w-icon>
							</template>
							Public Project
						</w-tooltip>
					</h1>

					<div class="project-home-info__info-bar">
						<div v-for="item in infoBarItems" :key="item.name">
							<w-icon>
								{{ item.icon }}
							</w-icon>
							{{ item.value }}
							{{ $tc(item.name, item.value) }}
						</div>
					</div>
					<div
						v-if="project.description"
						class="project-home-info__description"
					>
						{{ project.description }}
					</div>
				</div>
			</Container>
		</div>
		
		<Container class="project-home-page__content">
			<div class="project-home-page__overview">
				<section>
					<VindiTitle icon="mdi mdi-text-box">
						{{ $t('PROJECT_OVERVIEW_SECTION_INFO') }}
					</VindiTitle>
					<div class="project-readme">
						<article
							v-if="project.readmeHtml"
							class="project-readme__content markdown-enabled"
							v-html="project.readmeHtml"
						/>
						<div v-else class="project-readme__missing">
							<ProjectOverviewReadmeGraphic
								:color="project.accentColor"
							/>
							<h2>
								No project information
							</h2>
							<p v-if="project.accessLevel == 'manager'">
								Provide additional information to your project to help users understand your project better
							</p>
							<w-button
								bg-color="primary"
								color="white"
								route="settings/information"
							>
								Add information
								<w-icon class="right">
									mdi mdi-plus
								</w-icon>
							</w-button>
						</div>
					</div>
				</section>
			</div>
			<aside class="project-home-page__sidebar">
				<ProjectOverviewProgress />
				<ProjectOverviewHistory />
			</aside>
		</Container>
	</section>
</template>

<script lang="ts">
import Vue from 'vue';
import { parseSlug } from '~/src/helpers';
import fetchOverviewPage from '~/assets/query/project/fetchOverviewPage.gql';

export default Vue.extend({
	
	async asyncData(context) {
		const result = await context.$api.query(fetchOverviewPage, {
			pid: parseSlug(context.params.pid)
		});

		return {
			project: result.project
		};
	},

	data: () => ({
		project: null as any
	}),

	computed: {

		infoBarItems(): any[] {
			return [
				{
					name: 'GENERAL_TASK',
					icon: 'mdi mdi-bookmark-check',
					value: this.project.tasks.length
				},
				{
					name: 'GENERAL_MEMBER',
					icon: 'mdi mdi-account',
					value: this.project.members.length
				},
				{
					name: 'GENERAL_TEAM',
					icon: 'mdi mdi-account-group',
					value: this.project.teams.length
				}
			];
		},

		titleBarStyle(): any {
			return {
				backgroundColor: this.project.accentColor
			};
		}

	}
});
</script>

<style lang="scss">
.project-home-page {

	&__header {
		height: $header-height;
		margin-top: -$toolbar-height;
		background-color: var(--color-shade-0);
	}

	&__content {
		display: grid;
		grid-template-columns: repeat(7, minmax(0, 1fr));
		gap: 2rem;
		
		@include breakpoint(lg) {
			gap: 4rem;
		}
	}

	&__overview {
		@include padding(8, y);

		grid-column: 1 / -1;

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

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

	&__sidebar {
		@include margin(-20, t);

		order: -9999;
		grid-column: 1 / -1;
		display: flex;
		flex-direction: column;
		gap: 2.5rem;

		@include breakpoint(md) {
			grid-column: span 3 / span 3;
			order: 0;
		}

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

}

.project-home-info {
	@include padding(28, t);

	display: flex;

	&__bar {
		@include rounded(full);

		width: 5px;
	}

	&__content {
		@include padding(4, l);
	}

	&__title {
		@include font-size('3xl');
		@include font-weight(semibold);
		@include padding(2, b);

		display: flex;
		align-items: center;
	}

	&__badge {
		@include font-size(base);
		@include font-weight(normal);
		@include margin(2, l);
	}

	&__authentic {
		@include margin(2, l);

		width: 23px;
		height: 32px;
	}

	&__info-bar {
		color: #737373;
		display: flex;
		gap: 1.25rem;
	}

	&__description {
		@include padding(3, t);
		@include truncate;

		color: #404040;
		max-width: min(70vw, 550px);

		@include dark {
			color: white;
		}

		@include breakpoint(md) {
			max-width: 480px;
		}

		@include breakpoint(xl) {
			max-width: 900px;
		}
	}
}

.project-readme {
	@include shadow;
	@include rounded('3xl');
	@include padding(4);
	@include margin(2, t);
	
	background-color: var(--color-shade-0);
	min-height: 250px;
	display: flex;
	flex-direction: column;

	@include dark {
		background-color: var(--color-shade-2);
	}

	&__content {
		@include rounded('3xl');
	}

	&__missing {
		@include margin(4, y);

		text-align: center;

		svg {
			height: 10rem;
			color: #14A7F4;
			margin: 0 auto;
		}

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

			color: #525252;

			@include dark {
				color: white;
			}
		}

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

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

		.w-button {
			@include margin(6, t);
		}
	}
}
</style>