import React, { useState } from "react";
import { useUser } from "../../hooks/useUser";

export default function LanguageSelect() {
	const { language, setLanguage, screensTranslations } = useUser();
	const [isSubmenuOpen, setIsSubmenuOpen] = useState(false);

	if (!screensTranslations || !screensTranslations.ui) return <p>loading translations…</p>;
	const currentUiTranslations = screensTranslations.ui;

	function handleShowHideSubmenu() {
		setIsSubmenuOpen(!isSubmenuOpen);
	}

	function chooseLanguage(lang) {
		setIsSubmenuOpen(false);
		setLanguage(lang);
	}

	const supportedLanguages = ["FR", "EN", "ES", "PT", "DE", "DA", "FI", "PL", "CS", "SK", "MY"];

	const languageOptions = supportedLanguages.map((lang) => (
		<li key={lang} className='language-select__option' onClick={() => chooseLanguage(lang)}>
			{/* <img className='flag' src={`/img/flags/32x32/${lang}.png`} alt={lang} /> */}
			<img className='flag' src={`/img/flags/select/lhoist-${lang}.svg`} alt={lang} />
			<span>{lang}</span>
		</li>
	));

	return (
		<>
			<div className='language-select'>
				<button className='language-select__toggle' onClick={handleShowHideSubmenu}>
					<div className='flag'>
						<img src={`/img/flags/select/lhoist-${language}.svg`} alt={language} />
					</div>
					<span className='language'>{language}</span>
				</button>
				<ul className='language-select__country-list' aria-hidden={!isSubmenuOpen}>
					{languageOptions}
				</ul>
			</div>
		</>
	);
}