import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import HuAutocomplete from '@material-hu/components/design-system/Inputs/Autocomplete';

import { type Language } from 'src/constants/languages';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { getLanguageOptions } from 'src/utils/languages';

import { useTranslation } from '../../i18n';

type PlatformLanguageSectionProps = {
  value: Language | null;
  onChange: (language: Language) => void;
};

const PlatformLanguageSection = ({
  value,
  onChange,
}: PlatformLanguageSectionProps) => {
  const { t } = useTranslation();
  const { t: tSettings } = useLokaliseTranslation('settings');

  const languageOptions = getLanguageOptions().map(lang => ({
    value: lang.value,
    label: t(lang.label),
  }));

  const selectedOption =
    languageOptions.find(option => option.value === value) ?? null;

  return (
    <Stack
      sx={{
        gap: 0.5,
        p: 2,
        borderRadius: 2,
        backgroundColor: ({ palette }) => palette.new.background.elements.grey,
      }}
    >
      <Typography
        variant="globalS"
        sx={{ fontWeight: 'fontWeightSemiBold' }}
      >
        {tSettings('language_app_select_label')}
      </Typography>
      <HuAutocomplete
        options={languageOptions}
        value={selectedOption}
        onChange={option => option && onChange(option.value as Language)}
        disableClearable
      />
    </Stack>
  );
};

export default PlatformLanguageSection;
