import { getClosestLocaleCode } from '@proton/shared/lib/i18n/helper' ; import { Nullable } from '@proton/shared/lib/interfaces' ; import { TtagLocaleMap } from '@proton/shared/lib/interfaces/Locale' ; import { c } from 'ttag' ; import { SelectTwo , Option } from '../../../components' ; import { useConfig , useUserSettings } from '../../../hooks' ; interface Props { id : string ; className ? : string ; loading : boolean ; disabled ? : boolean ; locale : Nullable < string > ; locales : TtagLocaleMap ; onChange : ( locale : Nullable < string > ) => void ; } const InviteLocaleSelector = ( { className = 'field w100' , loading = false , disabled = false , locale , locales , onChange , ... rest } ) => { const { LOCALES = { } } = useConfig ( ) ; const [ userSettings ] = useUserSettings ( ) ; const defaultLanguage = LOCALES [ getClosestLocaleCode ( userSettings ?. Locale , locales ) ] ; const options = Object . keys ( LOCALES ) . map ( ( value ) => ( { text : LOCALES [ value ] , value , } ) ) ; options . unshift ( { text : c ( 'Label' ) . t `Default language (${ defaultLanguage })` , value : null , } ) ; const handleChange = async ( locale ) => { const localeCode = locale === null ? null : getClosestLocaleCode ( locale , locales ) ; onChange ( localeCode ) ; } ; return ( < SelectTwo disabled = { loading || disabled } className = { className } title = { c ( 'Action' ) . t `Select language for invitation emails` } value = { locale } onChange = { ( { value } ) => handleChange ( value ) } { ... rest } > { options . map ( ( { text , value } ) => ( < Option key = { value } value = { value } title = { text } / > ) ) } < /SelectTwo>); } ; export default InviteLocaleSelector ;