import React from 'react';
import PropTypes from 'prop-types';
import i18n from '~/locale/i18n';
import { Dialogue } from 'nixplay-ui-kit';

export default class LanguageChangedDialog extends React.Component {
	static propTypes = {
		closeLanguageChangedDialog: PropTypes.func.isRequired,
		getRef: PropTypes.func.isRequired,
	}

	shouldComponentUpdate() {
		if (!this.dialogRef ||
			!this.dialogRef.modal ||
			this.dialogRef.modal.state.visible) {
			return false;
		}
		return true;
	}

	getRef = (ref) => {
		this.dialogRef = ref;
		this.props.getRef(ref);
	}

	render() {
		const { closeLanguageChangedDialog } = this.props;
		return (
			<Dialogue
				ref={this.getRef}
				onRequestClose={closeLanguageChangedDialog}
				withClose={false}
			>
				<Dialogue.Title>{i18n.t('users.languageChanged', { locale: i18n.prevLocale })}</Dialogue.Title>
				<Dialogue.Description>{i18n.t('users.languageChangedDialogBody', { locale: i18n.prevLocale })}</Dialogue.Description>
				<Dialogue.Action
					onPress={closeLanguageChangedDialog}
					color="blue"
					testID="Ok"
				>
					{i18n.t('common.ok', { locale: i18n.prevLocale })}
				</Dialogue.Action>
			</Dialogue>
		);
	}
}
