import dayjs from "dayjs";
import { FC } from "react";
import { useTranslation } from "react-i18next";

import { En, Ru, Kz } from "@/shared/icons-old";

import {
	Select,
	SelectContent,
	SelectItem,
	SelectTrigger,
	SelectValue,
} from "../Shadcn/ui/select";

const items = [
	{
		value: "en",
		label: "ENG",
		icon: <En />,
	},
	{
		value: "ru",
		label: "РУС",
		icon: <Ru />,
	},
	{
		value: "kk",
		label: "ҚАЗ",
		icon: <Kz />,
	},
];

const DEFAULT_LANGUAGE = "en";

export const LanguageSwitcher: FC = () => {
	const { i18n } = useTranslation();

	const currentLanguage = items.some((item) => item.value === i18n.language)
		? i18n.language
		: DEFAULT_LANGUAGE;

	const handleLanguageChange = (language: string) => {
		i18n.changeLanguage(language);
		dayjs.locale(language);
	};

	return (
		<Select value={currentLanguage} onValueChange={handleLanguageChange}>
			<SelectTrigger className="h-10 w-auto min-w-[80px] gap-2 border-gray-200 bg-white">
				<SelectValue />
			</SelectTrigger>
			<SelectContent>
				{items.map((item) => (
					<SelectItem
						key={item.value}
						value={item.value}
						className="cursor-pointer"
					>
						<div className="flex items-center gap-2">
							<div className="h-5 w-5 drop-shadow-sm">
								{item.icon}
							</div>
							<span className="text-sm font-light">
								{item.label}
							</span>
						</div>
					</SelectItem>
				))}
			</SelectContent>
		</Select>
	);
};
