import { h, JSX } from 'preact';
import type { AirgapAuth, ViewState } from '@transcend-io/airgap.js-types';
import { useIntl } from 'react-intl';
import type { HandleSetViewState } from '../types';
import { messages } from '../messages';
import { ConsentManagerSupportedTranslationValue } from '@transcend-io/internationalization';
import { ObjByString } from '@transcend-io/type-utils';
/**
* The button to change languages
*/
export function LanguageButton({
handleSetViewState,
viewState,
fontColor,
supportedLanguages,
globalUiVariables,
}: {
/** Function to change viewState */
handleSetViewState: HandleSetViewState;
/** Global UI view state variables */
globalUiVariables: ObjByString;
/** Current viewState */
viewState: ViewState;
/** Font color */
fontColor: string;
/**
* The list of enabled languages - when not specified, all languages are shown.
* When specified with length = 0 | 1, no button is shown
*/
supportedLanguages?: ConsentManagerSupportedTranslationValue[];
}): JSX.Element {
const { formatMessage } = useIntl();
const onLanguageOptions = viewState === 'LanguageOptions';
const handleClick = (e: AirgapAuth): void => {
if (!onLanguageOptions) {
handleSetViewState('LanguageOptions');
} else {
handleSetViewState('back', e);
}
};
// show no language button when languages is disabled
if (supportedLanguages && supportedLanguages.length < 2) {
return ;
}
return (
);
}