<template>
	<section class="profile-page">
		<div class="profile-page__header">
			<Spacer />
			<Container narrow class="profile-page__info">
				<div class="profile-page__avatar-circle">
					<VindiAvatar
						:open-profile="false"
						:profile="profile"
						:size="108"
					/>
				</div>
				<div class="profile-page__details">
					<h1 class="profile-page__name">
						{{ profile.fullName }}

						<ProfileBadge
							:profile="profile"
							authentic-color="#8b5cf6"
							size="24px"
						/>

						<w-tooltip
							v-if="viewer.id == profile.id || viewer.role == 'admin'"
							top
							class="profile-page__badge"
						>
							<template #activator="{ on }">
								<span v-on="on">
									<w-icon
										class="profile-page__edit"
										color="primary"
										lg
										@click="editUser"
									>
										mdi mdi-pencil
									</w-icon>
								</span>
							</template>
							Edit
						</w-tooltip>
					</h1>
					
					<div class="profile-page__info-bar">
						<div v-for="item in infoBarItems" :key="item.name">
							<w-icon v-if="item.icon">
								{{ item.icon }}
							</w-icon>
							{{ item.value }}
						</div>
					</div>
				</div>
			</Container>
		</div>

		<Container narrow class="profile-page__content">
			<div class="profile-page__top-row">
				<section class="profile-readme">
					<VindiTitle icon="mdi mdi-emoticon-outline">
						About me
					</VindiTitle>
					<div class="profile-readme__content">
						<p v-html="renderedBio" />
					</div>
				</section>

				<section class="profile-teams">
					<VindiTitle icon="mdi mdi-account-group">
						Teams
					</VindiTitle>
					<div class="profile-teams__content">
						Work in progress
					</div>
				</section>
			</div>

			<section class="profile-projects">
				<VindiTitle icon="mdi mdi-folder-open">
					Projects
				</VindiTitle>
				<ProjectTileList :projects="profile.projects" :rows="2" />
			</section>
		</Container>
	</section>
</template>

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

export default Vue.extend({
	
	async asyncData(context) {
		const uid = parseSlug(context.params.uid);

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

		// Fetch profile information
		const result = await context.$api.query(fetchProfileInfo, {
			id: uid
		});
		
		return {
			profile: result.profileById
		};
	},

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

	computed: {

		infoBarItems(): any[] {
			const dateFormat = this.$t('MONTH_YEAR_FORMAT') as string;
			const createdAt = parseInt(this.profile.createdAt);
			const memberSince = dayjs(createdAt).format(dateFormat);

			const items = [
				{
					icon: 'mdi mdi-calendar',
					value: `Member since ${memberSince}`
				}
			];

			if(this.profile.location) {
				items.push({
					icon: 'mdi mdi-map-marker',
					value: this.profile.location
				});
			}

			if(this.profile.website) {
				items.push({
					icon: 'mdi mdi-earth',
					value: this.profile.website
				});
			}

			return items;
		},

		renderedBio(): string {
			return this.profile.bio ? marked(this.profile.bio) : '';
		},

		viewer(): any {
			return this.$store.state.profile;
		}
	},

	methods: {
		editUser() {
			const isAdmin = this.viewer.role == "admin";
			const isViewer = this.viewer.id == this.profile.id;

			if(isViewer) {
				this.$router.push("/settings/account");
				return;
			}

			if(isAdmin) {
				this.$router.push(`/admin/users/${this.profile.id}/edit`);
				return;
			}
		}
	}

});
</script>

<style lang="scss">
.profile-page {

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

	&__content {
		@include padding(12, t);
	}

	&__info {
		@include margin(-6, b);

		display: flex;
		align-items: center;
	}

	&__name {
		@include font-size('3xl');
		@include font-weight(semibold);
		@include padding(0.5, b);
	}

	&__edit {
		cursor: pointer;
	}

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

	&__avatar-circle {
		@include padding(3);
		@include margin(4, r);
		@include rounded(full);

		background-color: var(--color-shade-0);
	}

	&__top-row {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));

		@include breakpoint(sm) {
			gap: 2rem;
		}
		
		@include breakpoint(lg) {
			gap: 4rem;
		}
	}
}

.profile-readme, .profile-teams {
	grid-column: 1 / -1;

	&__content {
		@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);
		}
	}
}

@include breakpoint(md) {
	.profile-readme {
		grid-column: span 2 / span 2;
	}

	.profile-teams {
		grid-column: span 1 / span 1;
	}
}

.profile-projects {
	@include margin(10, t);
}
</style>