import cn from "classnames";
import { Flag } from "src/components";
import { useLocaleState } from "src/context";
import { useTheme } from "src/hooks";
import { changeLocale, getFlagCodeForLocale, intl, localeOptions } from "src/locale";
import styles from "./LocalePicker.module.css";

function LocalePicker() {
	const { locale, setLocale } = useLocaleState();
	const { getTheme } = useTheme();

	const changeTo = (lang: string) => {
		changeLocale(lang);
		setLocale(lang);
		location.reload();
	};

	const classes = ["btn", "dropdown-toggle", "btn-sm", styles.btn];
	const cns = cn(...classes, getTheme() === "dark" ? "btn-ghost-dark" : "btn-ghost-light");

	return (
		<div className="dropdown">
			<button type="button" className={cns} data-bs-toggle="dropdown">
				<Flag countryCode={getFlagCodeForLocale(locale)} />
			</button>
			<div className="dropdown-menu">
				{localeOptions.map((item) => {
					return (
						<a
							className="dropdown-item"
							href={`/locale/${item[0]}`}
							key={`locale-${item[0]}`}
							onClick={(e) => {
								e.preventDefault();
								changeTo(item[0]);
							}}
						>
							<Flag countryCode={getFlagCodeForLocale(item[0])} />{" "}
							{intl.formatMessage({ id: `locale-${item[1]}` })}
						</a>
					);
				})}
			</div>
		</div>
	);

	// <div className={className}>
	// 		<Menu>
	// 			<MenuButton as={Button} {...additionalProps}>
	// 				<Flag countryCode={getFlagCodeForLocale(locale)} />
	// 			</MenuButton>
	// 			<MenuList>
	// 				{localeOptions.map((item) => {
	// 					return (
	// 						<MenuItem
	// 							icon={<Flag countryCode={getFlagCodeForLocale(item[0])} />}
	// 							onClick={() => changeTo(item[0])}
	// 							key={`locale-${item[0]}`}>
	// 							<span>{intl.formatMessage({ id: `locale-${item[1]}` })}</span>
	// 						</MenuItem>
	// 					);
	// 				})}
	// 			</MenuList>
	// 		</Menu>
	// 	</Box>
}

export { LocalePicker };