import React, { useState } from "react";
import { v4 as uuidv4 } from "uuid";
import { useUser } from "../../hooks/useUser";
import translationsJSON from "../../data/profile.json";

export default function CountrySelect({ options }) {
	const [isSubmenuOpen, setIsSubmenuOpen] = useState(false);
	const { profile, changeProfile } = useUser();

	const { language } = useUser();
	const languageTranslationExists = translationsJSON.hasOwnProperty(language);
	const screenTranslations = languageTranslationExists ? translationsJSON[language] : translationsJSON["en"];

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

	function handleChangeProfile() {
		changeProfile("subcontractor_employee");
	}

	console.log(screenTranslations);

	// console.log(options);

	return (
		<div className='profile-select'>
			<ul className='' aria-hidden={!isSubmenuOpen}>
				<li value='civilian' onClick={handleChangeProfile}>
					{screenTranslations.civilian}
				</li>
				<li value='driver' onClick={handleChangeProfile}>
					{screenTranslations.driver}
				</li>
				<li value='lhoist_employee' onClick={handleChangeProfile}>
					{screenTranslations.lhoist_employee}
				</li>
				<li value='subcontractor_employee' onClick={handleChangeProfile}>
					{screenTranslations.subcontractor_employee}
				</li>
			</ul>
		</div>
	);
}
