import { type FC } from 'react';

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

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

import { useLokaliseTranslation } from 'src/utils/i18n';

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

const LANGUAGE_CODES = [
  'en',
  'es',
  'pt',
  'pt-br',
  'fr',
  'de',
  'it',
  'lt',
  'nl',
  'da',
  'fil',
  'hi',
  'is',
  'no',
  'sk',
  'sv',
  'uk',
  'vi',
  'bg',
  'ta',
  'zh',
  'zh-CN',
  'zh-TW',
  'bn',
  'ne',
  'ms',
  'cs',
  'hu',
  'ja',
  'pl',
  'ro',
  'ru',
  'sr',
  'tr',
  'th',
  'fi',
  'id',
] as const;

const toTranslationKey = (code: string) =>
  `language_${code.toLowerCase().replace('-', '_')}`;

export const SettingsChangeLanguageForm: FC = () => {
  const { t } = useTranslation();
  const { t: tLokalise } = useLokaliseTranslation('dashboard');
  const { t: tSettings } = useLokaliseTranslation('settings');

  const autotranslateLanguages = LANGUAGE_CODES.map(code => ({
    value: code,
    label: tLokalise(toTranslationKey(code)),
  }));

  return (
    <Stack
      sx={{
        gap: 0.5,
        p: 2,
        borderRadius: 2,
        backgroundColor: ({ palette }) => palette.new.background.elements.grey,
      }}
    >
      <Typography
        variant="globalS"
        sx={{ fontWeight: 'fontWeightSemiBold' }}
      >
        {t('POSTS_FROM_COLLAGUES')}
      </Typography>
      <HuFormAutocomplete
        name="postTranslationLanguage"
        options={autotranslateLanguages}
        rules={{ required: true }}
        autocompleteProps={{
          placeholder: t('AUTOTRANSLATE_LANGUAGE_PLACEHOLDER'),
        }}
      />
      <Typography
        variant="globalS"
        sx={{ color: ({ palette }) => palette.new.text.neutral.lighter }}
      >
        {tSettings('language_modal_title')}
      </Typography>
    </Stack>
  );
};