<template>
	<nav class="sidebar">
		<div class="sidebar__inner">
			<div
				v-if="indicator >= 0"
				class="sidebar__highlight"
				:style="highlightStyle"
			/>
			<ol class="sidebar__container">
				<!-- TODO Remove temporary workaround -->
				<!-- See: https://github.com/antoniandre/wave-ui/issues/78 -->
				<client-only>
					<w-tooltip
						v-for="(item, index) in listItems"
						:key="index"
						class="sidebar__item"
						right
					>
						<template #activator="{ on }">
							<nuxt-link
								:to="item.href"
								tag="li"
								@click="currentIndex = index"
							>
								<div class="sidebar__item-inner" v-on="on">
									<img :src="item.icon">
								</div>
							</nuxt-link>
						</template>
						{{ $t(item.name) }}
					</w-tooltip>
					<template #placeholder>
						<div
							v-for="(item, index) in listItems"
							:key="index"
							class="sidebar__item"
							right
						>
							<router-link
								:to="getPath(item.href)"
								tag="li"
								@click="currentIndex = index"
							>
								<div class="sidebar__item-inner">
									<img :src="item.icon">
								</div>
							</router-link>
						</div>
					</template>
				</client-only>
			</ol>
		</div>
	</nav>
</template>

<script lang="ts">
import Vue from "vue";

export default Vue.extend({
	name: 'Sidebar',

	props: {
		project: {
			type: Object,
			required: true
		},
		getPath: {
			type: Function,
			required: true
		},
		indicator: {
			type: Number,
			required: true
		}
	},

	data: () => ({
		listItems: [] as any[]
	}),

	computed: {
		renderTooltips(): boolean {
			return process.client;
		},
		highlightStyle(): any {
			const index = this.indicator;

			return index !== undefined ? {
				top: ((index + 1) * 56) + 'px',
				backgroundColor: this.project.accentColor
			} : {
				display: 'none'
			};
		}
	},
	
	created() {
		const views = this.$registries.projectViews.toItems();

		// initializing list items
		this.listItems = views.map(item => ({
			name: item.content.name,
			icon: item.content.icon,
			href: this.getPath(item.id)
		}));

		// Prepend the home button
		this.listItems.unshift({
			name: 'VIEW_HOME',
			icon: require('~/assets/img/sidebar/home.svg'),
			href: '/'
		});
	}
});
</script>

<style lang="scss">
.sidebar {
	width: 3.5rem;
	background-color: var(--color-misc-1);
	z-index: 1;

	&__inner {
		position: sticky;
		top: 0;
	}

	&__highlight {
		@include rounded(lg, r);
		@include transition(all);

		position: absolute;
		height: 3.5rem;
		width: 0.25rem;
		z-index: 10;
		left: 0;
	}

	&__item {
		@include transition(colors);

		cursor: pointer;
		
		&:hover {
			background-color: rgba(0, 0, 0, 0.2);
		}

		&:first-child {
			img {
				@include transition(transform);
			}

			&:hover img {
				transform: scale(1.1);
			}
		}
	}

	&__item-inner {
		@include padding(1, y);

		display: flex;
		align-items: center;
		justify-content: center;
		height: 3.5rem;
		width: 3.5rem;

		img {
			width: 2rem;
			height: 2rem;
		}
	}

}
</style>