import React from "react";
import { useDispatch, useSelector } from "react-redux";

import { Select, type SelectItem } from "@components/common/Select";
import {
	LOCALE_LABEL,
	SUPPORTED_LOCALES,
	type SupportedLocale,
} from "@providers/LocalizationProvider";
import { setLanguage } from "@store/settingsSlice";
import type { ReduxStateType } from "@store/types";

const languageOptions: SelectItem<SupportedLocale>[] = SUPPORTED_LOCALES.map(
	(value: SupportedLocale) => ({ id: value, label: LOCALE_LABEL[value] }),
);

export const LanguageSetting = () => {
	const dispatch = useDispatch();
	const languageId = useSelector(
		(state: ReduxStateType) => state.settings.language,
	);
	const language = languageOptions.filter((ln) => ln.id === languageId)[0];

	function setItem(_value: string) {
		dispatch(setLanguage(_value));
	}

	return (
		<Select activeItem={language} items={languageOptions} setItem={setItem} />
	);
};
