<template>
	<section class="home-page">
		<div class="home-page__header">
			<!-- Display just "Welcome" when user is signed out -->
			<Avatar
				:size="80"
				:profile="$store.state.profile"
				:open-profile="false"
			/>
			<div class="home-page__welcome">
				<h2>
					{{ $t('HOMEPAGE_WELCOME') }}
				</h2>
				<h1>
					{{ firstName }}
				</h1>
			</div>
		</div>
		
		<main class="home-page__content container">
			<div class="home-page__overview">
				<HomeStarredView
					v-if="starred.length > 0"
					:starred="Starred"
				/>

				<HomeProjectsView
					:projects="projects"
					@create="$refs.toolbar.openProjectCreation()"
				/>
				
				<HomeTeamsView
					v-if="teams.length"
					:teams="teams"
				/>
			</div>
			<aside class="home-page__sidebar">
				<HomeActivity />
				<HomeFocus />
			</aside>
		</main>
	</section>
</template>

<script lang="ts">
import Vue from 'vue';
import { Optional } from '../typings/helpers';
import fetchProjects from '~/assets/query/home/fetchProjects.gql';

export default Vue.extend({

	async asyncData({ store, redirect, $api }) {
		if(!store.state.profile) {
			redirect('/explore');
			return;
		}

		const { projects, teams } = await $api.query(fetchProjects);
		
		return {
			projects,
			teams
		};
	},

	data: () => ({
		projects: [],
		starred: [],
		teams: []
	}),

	computed: {
		firstName(): Optional<string> {
			return this.$store.state.profile?.firstName;
		}
	}
});
</script>

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

	&__header {
		height: $header-height;
		margin-top: -$toolbar-height;
		background-color: var(--color-shade-0);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	&__welcome {
		@include padding(6, l);
		@include font-weight(semibold);
		@include font-size('2xl');
	}

	&__content {
		display: grid;
		grid-template-columns: repeat(7, minmax(0, 1fr));
		
		@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;
		}
	}

}
</style>