<template>
	<header
		class="print:hidden sticky top-0 z-10 text-center border-b bg-[#caca]"
		:aria-label="t('Menu')"
	>
		<button
			@click="locale = 'fr'"
			class="px-1 border rounded-sm hover:bg-slate-100 m-1 bg-white"
			:aria-pressed="locale === 'fr'"
			lang="fr"
		>
			<img
				src="/fr.svg"
				class="w-[4mm] inline"
				height="15"
				width="10"
				:alt="t('IMG_ALT.FRENCH_FLAG')"
				aria-hidden="true"
			/>
			<span class="sr-only"> Traduire en </span>
			<span> Français </span>
		</button>

		<button
			@click="locale = 'en'"
			class="px-1 border rounded-sm hover:bg-slate-100 m-1 bg-white"
			:aria-pressed="locale === 'en'"
			lang="en"
		>
			<img
				src="/en.svg"
				class="w-[4mm] inline"
				height="15"
				width="10"
				:alt="t('IMG_ALT.ENGLISH_FLAG')"
				aria-hidden="true"
			/>

			<span class="sr-only"> Translate in </span>
			<span> English </span>
		</button>

		<button
			@click="print"
			class="px-1 border rounded-sm hover:bg-slate-100 m-1 bg-white hidden md:inline"
		>
			<i
				class="fa-solid fa-print"
				aria-hidden="true"
			></i>
			{{ t("Imprimer") }}
		</button>
	</header>

	<div class="md:m-4 print:m-0!">
		<ResumePage />
	</div>

	<button
		@click="doABarrelRoll"
		title="Do a barrell roll!"
		class="fixed right-4 bottom-4 border rounded-full hover:bg-slate-100 m-1 bg-white disabled:opacity-50 disabled:hover:bg-white print:hidden"
		:disabled="rolling"
		aria-hidden="true"
		tabindex="-1"
	>
		<img
			src="/peppy.webp"
			class="w-[10mm] rounded-full"
			width="118"
			height="118"
			:alt="t('IMG_ALT.DO_A_BARRELL_ROLL')"
		/>
	</button>
</template>
<script setup lang="ts">
import { ref, watch } from "vue";
import ResumePage from "./components/ResumePage.vue";
import { useI18n } from "vue-i18n";

const { locale, t } = useI18n();
const rolling = ref(false);

watch(
	() => locale.value,
	() => {
		document.documentElement.lang = locale.value;
	},
	{ immediate: true },
);

function print() {
	window.print();
}

function doABarrelRoll() {
	if (rolling.value) {
		return;
	}
	rolling.value = true;
	const avatar = document.getElementById("avatar")!.classList;
	avatar.add("do-a-barrel-roll");
	setTimeout(() => {
		avatar.remove("do-a-barrel-roll");
		rolling.value = false;
	}, 4000);
}
</script>
