<template>
	<header
		class="p-1 flex justify-between gap-1 items-center print:hidden sticky top-0 z-10 text-center border-b bg-[#caca] dark:bg-slate-900 border-gray-200 dark:border-gray-600"
		:aria-label="t('Menu')"
	>
		<button
			v-if="locale !== 'fr'"
			@click="locale = 'fr'"
			class="px-1 border rounded-sm border-gray-200 dark:border-gray-600 bg-white dark:bg-slate-700 hover:bg-slate-100 dark:hover:bg-slate-600"
			lang="fr"
		>
			<img
				src="/fr.svg"
				class="w-[4mm] inline"
				height="15"
				width="10"
				:alt="t('IMG_ALT.FRENCH_FLAG')"
				aria-hidden="true"
			/>
			<span> Traduire en français </span>
		</button>

		<button
			v-else
			@click="locale = 'en'"
			class="px-1 border rounded-sm border-gray-200 dark:border-gray-600 bg-white dark:bg-slate-700 hover:bg-slate-100 dark:hover:bg-slate-600"
			lang="en"
		>
			<img
				src="/en.svg"
				class="w-[4mm] inline"
				height="15"
				width="10"
				:alt="t('IMG_ALT.ENGLISH_FLAG')"
				aria-hidden="true"
			/>
			<span> Translate in English </span>
		</button>

		<button
			class="bg-transparent mr-2"
			aria-hidden="true"
			tabindex="-1"
		>
			<label class="relative inline-block w-9 h-5 cursor-pointer">
				<input
					v-model="useDarkTheme"
					type="checkbox"
					class="peer sr-only"
					tabindex="-1"
				/>
				<span
					class="absolute inset-0 bg-gray-200 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-blue-600 dark:bg-neutral-700 dark:peer-checked:bg-slate-500 peer-disabled:opacity-50 peer-disabled:pointer-events-none"
				></span>
				<span
					class="absolute top-1/2 start-0.5 -translate-y-1/2 size-4 bg-white rounded-full shadow-xs transition-transform duration-200 ease-in-out peer-checked:translate-x-full dark:bg-neutral-400 dark:peer-checked:bg-white flex items-center justify-center"
				>
					<i
						class="fa text-xs text-black"
						:class="{
							'fa-sun': !useDarkTheme,
							'fa-moon': useDarkTheme,
						}"
					></i>
				</span>
			</label>
		</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);
const useDarkTheme = ref(
	window.matchMedia &&
		window.matchMedia("(prefers-color-scheme: dark)").matches,
);

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

watch(
	() => useDarkTheme.value,
	() => {
		if (useDarkTheme.value) {
			document.body.classList.add("dark");
		} else {
			document.body.classList.remove("dark");
		}
	},
	{ immediate: true },
);

function doABarrelRoll() {
	if (rolling.value) {
		return;
	}

	window.scroll({
		top: 0,
		left: 0,
		behavior: "smooth",
	});

	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>
