import Autocomplete from "@mui/material/Autocomplete";
import TextField from "@mui/material/TextField";
import Box from "@mui/material/Box";
import React from "react";
import { useTranslation } from "react-i18next";
import { useTranslation as useRefineTranslation } from "@refinedev/core";

const I18nPicker = () => {
  const { i18n } = useTranslation();
  const { getLocale, changeLocale } = useRefineTranslation();
  const currentLocale = getLocale();

  return (
    <Autocomplete
      value={currentLocale}
      options={i18n.languages}
      disableClearable={true}
      renderInput={(params) => {
        return <TextField {...params} label={ "Language" } variant="outlined" />
      }}
      renderOption={(props, option) => {
        const { key, ...optionProps } = props;
        return (
          <Box
            key={key}
            component="li"
            sx={{ '& > img': { mr: 2, flexShrink: 0 } }}
            {...optionProps}
          >
            { option }
          </Box>
        );
      }}
      onChange={(event, value) => {
        changeLocale(value);
      }}
    />
  )
}

export default I18nPicker;