import React from 'react';

import { useLingui } from '@lingui/react';
import makeStyles from '@mui/styles/makeStyles';
import MenuItem from '@mui/material/MenuItem';
import Select from '@mui/material/Select';

const useStyles = makeStyles((theme) => ({
	root: {
		fontSize: '1rem',
		fontWeight: '400',
		backgroundColor: 'none',
		color: theme.palette.text.primary,
		borderButtom: 'none',
		'&:hover': {
			color: theme.palette.text.primary,
		},
		'& fieldset': {
			display: 'none',
		},
		'& .MuiSelect-select': {
			padding: '0px 0px',
			marginRight: '10px',
		},
		'&:before': {
			borderBottom: 'none',
		},
	},
}));

export default function LanguageSelect(props) {
	const classes = useStyles();
	const { i18n } = useLingui();

	const handleChange = (event) => {
		const language = event.target.value;

		i18n.activate(language);

		props.onChange(language);
	};

	return (
		<Select className={classes.root} variant="standard" displayEmpty value={i18n.locale} onChange={handleChange}>
			<MenuItem value="en">English</MenuItem>
			<MenuItem value="de">Deutsch</MenuItem>
			<MenuItem value="es">Español</MenuItem>
			<MenuItem value="fr">Français</MenuItem>
			<MenuItem value="it">Italiano</MenuItem>
			<MenuItem value="pl">Polski</MenuItem>
			<MenuItem value="pt">Português</MenuItem>
			<MenuItem value="ru">Русский</MenuItem>
			<MenuItem value="ko">한국어</MenuItem>
		</Select>
	);
}

LanguageSelect.defaultProps = {
	onChange: function (lang) {},
};