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

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

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

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

	if (!profile) return <div className='profile-select dropdown-select'> Loading...</div>;

	const selectOptions = Object.keys(options).map((key) => (
		<li key={uuidv4()} className='dropdown-select__option' onClick={() => handleChangeProfile()}>
			{options[key]}
		</li>
	));

	return (
		<div className='profile-select dropdown-select'>
			<button className='dropdown-select__toggle' onClick={handleShowHideSubmenu}>
				{profile}
			</button>
			<ul className='dropdown-select__select-list' aria-hidden={!isSubmenuOpen}>
				{selectOptions}
			</ul>
		</div>
	);
}
