<template>
	<nav
		class="sidebar"
		:class="computeClass"
		@mouseover="expanded = true"
		@mouseleave="expanded = false"
	>
		<div class="sidebar__contents">
			<div
				v-if="value >= 0"
				class="sidebar__highlight"
				:style="highlightStyle"
			/>
			<ol class="sidebar__container">
				<nuxt-link
					v-for="(item, index) in listItems"
					:key="index"
					:to="item.href"
					:title="$t(item.name)"
					class="sidebar__item"
					@click.native="emitIndicator($event, index)"
				>
					<div class="sidebar__icon">
						<img :src="item.icon">
					</div>
					<div class="sidebar__title">
						<img
							v-if="item.image"
							:src="item.image"
						>
						<template v-else>
							{{ $t(item.name) }}
						</template>
					</div>
					<w-icon
						v-if="!item.image"
						class="sidebar__arrow"
					>
						mdi mdi-chevron-right
					</w-icon>
				</nuxt-link>
				<VindiSpacer />
				<li
					class="sidebar__item sidebar__expander"
					@click="toggleSidebarExpansion"
				>
					<div class="sidebar__icon">
						<w-icon>
							mdi mdi-chevron-right
						</w-icon>
					</div>
					<div class="sidebar__title">
						<div>
							Collapse Sidebar
						</div>
						<small>
							Disable auto reveal
						</small>
					</div>
				</li>
			</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
		},
		value: {
			type: Number,
			required: true
		}
	},

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

	computed: {
		computeClass(): any {
			return {
				'sidebar--expanded': this.expanded && this.canExpandSidebar
			};
		},
		renderTooltips(): boolean {
			return process.client;
		},
		highlightStyle(): any {
			const index = this.value;

			return index !== undefined ? {
				top: ((index + 1) * 56) + 'px',
				backgroundColor: this.project.accentColor
			} : {
				display: 'none'
			};
		},
		canExpandSidebar(): boolean {
			return this.$store.state.expandSidebar;
		}
	},
	
	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',
			image: require('~/assets/img/sidebar/vindigo.svg'),
			icon: require('~/assets/img/sidebar/home.svg'),
			href: '/'
		});
	},

	methods: {
		toggleSidebarExpansion() {
			this.$store.commit('setExpandSidebar', !this.canExpandSidebar);
		},

		emitIndicator(e: any, index: number) {
			if(!e.ctrlKey) {
				this.$emit('input', index - 1);
			}
		}
	}
});
</script>

<style lang="scss">
$sidebar-collapsed-width: 3.5rem;
$sidebar-expanded-width: 14rem;

.sidebar {
	@include transition(size);

	width: $sidebar-collapsed-width;
	flex-shrink: 0;
	z-index: 1;

	// &--expanded {
	// 	width: $sidebar-expanded-width;
	// }

	&__contents {
		@include transition(shadow);
		@include transition(size);

		height: 100%;
		position: fixed;
		overflow-x: hidden;
		background-color: var(--color-misc-1);
		width: $sidebar-collapsed-width;
		z-index: 900;
		top: 0;
	}

	&--expanded &__contents {
		box-shadow: rgba(43, 43, 43, 0.45) 0 0 1.25rem;
		width: $sidebar-expanded-width;
	}

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

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

	&__container {
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	&__item {
		@include transition(colors);

		display: flex;
		align-items: center;
		cursor: pointer;
		color: white;

		img {
			width: 2rem;
			height: 2rem;
		}
		
		&:hover {
			background-color: rgba(0, 0, 0, 0.25);
		}
	}

	&__icon {
		display: flex;
		flex-shrink: 0;
		align-items: center;
		justify-content: center;
		height: 3.5rem;
		width: 3.5rem;
	}

	&__title {
		@include font-size(base);
		@include padding(2, x);

		white-space: nowrap;
		flex-shrink: 0;
		flex: 1;

		img {
			@include margin(-1, l);

			width: 7.5rem;
			display: block;
		}
	}

	&__arrow {
		@include padding(4, r);
	}

	&__expander .w-icon {
		@include transition(transform);
	}

	&--expanded &__expander .w-icon {
		transform: rotate(180deg);
	}

}
</style>