<script lang="ts">
	import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
	import * as svgIcons from '@fortawesome/free-solid-svg-icons';
	import * as svgCore from '@fortawesome/fontawesome-svg-core';
	import type { CurrentLanguage, LanguagePair, MenuEntry } from '$lib/types';

	svgCore.library.add(svgIcons.faHome);
	svgCore.library.add(svgIcons.faUserTie);
	svgCore.library.add(svgIcons.faGraduationCap);
	svgCore.library.add(svgIcons.faUserClock);
	svgCore.library.add(svgIcons.faAddressCard);
	svgCore.library.add(svgIcons.faBars);
	svgCore.library.add(svgIcons.faGlobeEurope);

	const homeLookup: svgCore.IconLookup = { prefix: 'fas', iconName: 'home' };
	const userTieLookup: svgCore.IconLookup = { prefix: 'fas', iconName: 'user-tie' };
	const graduationCapLookup: svgCore.IconLookup = { prefix: 'fas', iconName: 'graduation-cap' };
	const userClockLookUp: svgCore.IconLookup = { prefix: 'fas', iconName: 'user-clock' };
	const addressCardLookUp: svgCore.IconLookup = { prefix: 'fas', iconName: 'address-card' };
	const homeIconDefinition: svgCore.IconDefinition = svgCore.findIconDefinition(homeLookup);
	const userTieDefinition: svgCore.IconDefinition = svgCore.findIconDefinition(userTieLookup);
	const graduationDefinition: svgCore.IconDefinition =
		svgCore.findIconDefinition(graduationCapLookup);
	const userClockDefinition: svgCore.IconDefinition = svgCore.findIconDefinition(userClockLookUp);
	const addressCardDefinition: svgCore.IconDefinition =
		svgCore.findIconDefinition(addressCardLookUp);

	export let currentLanguage: CurrentLanguage = 'it';
	const menu: Record<MenuEntry, LanguagePair> = {
		home: { it: 'Home', en: 'Home' },
		job: { it: 'Esperienze', en: 'Experiences' },
		school: { it: 'Formazione', en: 'Training' },
		blog: { it: 'Blog', en: 'Blog' },
		portfolio: { it: 'Portfolio', en: 'Portfolio' }
	};
</script>

<div class="container">
	<ul>
		<li>
			<a class="menu-element" href="#top">
				<i>
					<FontAwesomeIcon icon={homeIconDefinition} />
				</i>
				<span>{menu.home[currentLanguage]}</span></a
			>
		</li>
		<li>
			<a class="menu-element" href="#jobs"
				><i>
					<FontAwesomeIcon icon={userTieDefinition} />
				</i><span>{menu.job[currentLanguage]}</span></a
			>
		</li>
		<li>
			<a class="menu-element" href="#training"
				><i>
					<FontAwesomeIcon icon={graduationDefinition} />
				</i><span>{menu.school[currentLanguage]}</span></a
			>
		</li>
		<li>
			<a class="menu-element" href="#portfolio"
				><i>
					<FontAwesomeIcon icon={userClockDefinition} />
				</i><span>{menu.portfolio[currentLanguage]}</span></a
			>
		</li>
		<!-- <li>
			<a class="menu-element" href="/blog"
				><i>
					<FontAwesomeIcon icon={addressCardDefinition} />
				</i><span>{menu.blog[currentLanguage]}</span></a
			>
		</li> -->
	</ul>
</div>

<style lang="scss">
	@import '../../app.scss';
	$menu-size: 1004px;
	a {
		padding: 0;
		margin: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: larger;
		min-width: 50px;
		width: 100%;
		height: 50px;

		i {
			margin-right: 10%;
		}
	}

	a:hover,
	a:active {
		background-color: $default-active-color;
	}

	ul {
		display: flex;
		width: 100%;
		height: 100%;
		list-style-type: none;
		padding: 0;
		margin: 0;
		margin: auto;
		border-radius: $default-border-radius;
	}

	.container {
		border-radius: $default-border-radius;
		width: 100%;
		border-bottom: solid $border-hover-color 1px;
	}

	ul li {
		background-color: $basecolor2;
		flex: 1;
	}
	li:first-of-type {
		background-color: $basecolor2;
		border-top-left-radius: $default-border-radius;
		border-bottom-left-radius: $default-border-radius;
		a:hover,
		a:active {
			border-top-left-radius: $default-border-radius;
			border-bottom-left-radius: $default-border-radius;
		}
	}
	li:last-of-type {
		border-top-right-radius: $default-border-radius;
		border-bottom-right-radius: $default-border-radius;
		a:hover,
		a:active {
			border-top-right-radius: $default-border-radius;
			border-bottom-right-radius: $default-border-radius;
		}
	}
</style>
