<script lang="ts">
	import type { Handle, RequestEvent, ResolveOptions } from '@sveltejs/kit';
	import type { CurrentLanguage } from '$lib/types';
	import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
	import * as svgIcons from '@fortawesome/free-solid-svg-icons';
	import * as svgCore from '@fortawesome/fontawesome-svg-core';
	let langSelectOpen = false;
	let langSelect: Element;
	export let currentLanguage: CurrentLanguage = 'en';

	function setOpen() {
		langSelectOpen = !langSelectOpen;

		const animationLanguage = langSelect.animate([{ width: '0px' }, { width: '200px' }], {
			duration: 100,
			fill: 'both'
		});
		if (langSelectOpen) {
			animationLanguage.play();
			// animateConatiner.play();
		} else {
			animationLanguage.reverse();
			// animateConatiner.reverse();
		}
	}

	function setLanguage(value: CurrentLanguage) {
		currentLanguage = value;
	}

	svgCore.library.add(svgIcons.faGlobeEurope);

	const globeLookup: svgCore.IconLookup = { prefix: 'fas', iconName: 'globe-europe' };
	const globeDefinition: svgCore.IconDefinition = svgCore.findIconDefinition(globeLookup);
	const buttonLabel: { [key: CurrentLanguage[number]]: string } = {
		it: 'seleziona la lingua',
		en: 'select language'
	};
</script>

<div class="language-selector">
	<button on:click={setOpen}>
		<FontAwesomeIcon icon={globeDefinition} size="2x" /><span>{buttonLabel[currentLanguage]}</span
		></button
	>
	<div class="button-container" bind:this={langSelect}>
		<button
			class="custom-button {currentLanguage == 'it' ? 'custom-button-active' : ''}"
			on:click={() => setLanguage('it')}
			title="attiva lingua italiana">it</button
		>
		<button
			class="custom-button {currentLanguage == 'en' ? 'custom-button-active' : ''}"
			on:click={() => setLanguage('en')}
			title="enable english language">en</button
		>
	</div>
</div>

<style lang="scss">
	@import '../../app.scss';
	.language-selector {
		display: flex;
		position: fixed;
		flex-direction: row;
		align-items: center;
		background-color: $basecolor2;
		border-radius: $default-border-radius;
		font-size: 50px;
		border-bottom: solid $border-hover-color 1px;
		border-left: solid $border-hover-color 1px;
		bottom: 70px;
		right: 0;
	}
	.button-container {
		display: flex;
		justify-content: space-evenly;
		width: 0px;
		overflow: hidden;
	}
	button {
		background: none;
		border: none;
		width: 60px;
		height: 50px;
		span {
			border: 0;
			clip: rect(0 0 0 0);
			height: 1px;
			margin: -1px;
			overflow: hidden;
			padding: 0;
			position: absolute;
			width: 1px;
		}
	}
	.custom-button {
		width: 100px;
		font-size: large;
	}
	.custom-button-active {
		background-color: $default-active-color;
		outline: solid 1px;
	}
</style>
