class Activation extends React.Component {
    constructor(props) {
        super(props)
    }
    componentDidUpdate() {
        const { activationValid, navigation } = this.props;
        if (activationValid) {
            //avigation.navigate('Pin');
        }
    }

    onCodeChange(input) {
        const { setActivationCode, validateActivationCode } = this.props;
        setActivationCode(input);
        if (input.length === 5) {
            validateActivationCode(input);
        }
    }

    resend() {
        const { resendCode, t } = this.props;
        resendCode();
        Alert.alert(
            t('screens.signup.codeResendTitle'),
            t('screens.signup.codeResendBody'),
        );
    }

    render() {
        const {
            activationCode, t, activationValid, validationInProgress,
        } = this.props;
        const lucyMood = (activationValid != null && !activationValid) ? 'happy' : 'demand';
        const lucyTextKey = (activationValid != null && !activationValid) ? 'screens.signup.activationInvalidBubble' : 'screens.signup.activationInfoBubble';

        return (
            <View style={{
                flex: 1, height: Dimensions.get('window').height / 1.65, width: Dimensions.get('window').width / 1.1, marginTop: 50,
            }}
            >

                <ReadyAwareLucy
                    style={{ flex: 5 }}
                    mood={lucyMood}
                    componentPosition="left"
                    unReadyText={t(lucyTextKey)}
                    readyText={t('screens.signup.codeActivated')}
                    text={t(lucyTextKey)}
                    componentSize={102}
                    alignText="center"
                    bubbleWidth="90%"
                />
                <ValidationContainer>
                    <ValidatedPin activationCode={activationCode} onChange={textInput => this.onCodeChange(textInput)} activationValid={activationValid}/>
                </ValidationContainer>
                <View style={{ flex: 1 }}>
                    <SecondaryButton title={t('screens.signup.noCodeReceived')} onPress={() => this.resend()} fontSize={21 + scaleFactor} />
                </View>
            </View>
        );
    }
}