import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import React from 'react';
import {
  ButtonGroup, Dropdown, DropdownButton,
} from 'react-bootstrap';
import { FormattedMessage } from './localization';
import { availableLocales, defaultLocale, localeDescriptions } from '../util/localization';

export default function LocaleSwitcher({
  locale = defaultLocale,
  onChangeLocale = null,
  disabled = false,
  showLoading = false,
}: {
  locale?: string,
  onChangeLocale?: (value: string) => void,
  disabled?: boolean,
  showLoading?: boolean,
} = {}) {
  return (
    <DropdownButton
      disabled={showLoading || disabled}
      as={ButtonGroup}
      variant="outline-secondary"
      alignRight
      id="dropdown-locale"
      title={(
        <>
          <FontAwesomeIcon icon="language" />
          <span className="sr-only">
            <FormattedMessage
              id="LocaleSwitcher.screenReaderText"
              defaultMessage="Switch language"
              description="Screen reader description of the locale switcher button"
            />
          </span>
        </>
      )}
    >
      {
        availableLocales.map((thisLocale) => (
          <Dropdown.Item
            key={thisLocale}
            onClick={
              onChangeLocale
                ? () => { onChangeLocale(thisLocale); }
                : null
            }
            active={locale === thisLocale}
            data-lang={thisLocale}
          >
            <FormattedMessage
              id={`LocaleSwitcher.language.${thisLocale}`}
              defaultMessage={localeDescriptions[thisLocale]}
            />
          </Dropdown.Item>
        ))
      }
    </DropdownButton>
  );
}