class PinBox extends React.Component {
    constructor(props) {
        super(props)
    }

    componentDidMount() {
        const { setReady, ready } = this.props;
        if (this.props.ready) {
            setReady(false);
        }
    };

    componentDidUpdate() {
        const { ready, setReady, activationValid } = this.props;
        if (!ready && activationValid) {
            setReady(true);
        }
    }

    render() {
        const { activationCode, onFocus, onBlur, onChange} = this.props;
        return (
            <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
                <View style={styles.inletShadowHack}>
                    <LabelWithoutInput
                        containerStyle={{ alignItems: 'center', justifyContent: 'center' }}
                        {...fonts.patrickHand}
                        labelStyle={styles.label}
                        label={VALIDATION_COMMON_PARTS[0]}
                    />
                </View>
                <Text style={styles.dash}>{VALIDATION_COMMON_PARTS[1]}</Text>
                <FormInput
                    underlineColorAndroid="transparent"
                    containerStyle={styles.inletShadowHack}
                    inputStyle={styles.formInput}
                    maxLength={5}
                    value={activationCode}
                    onFocus={onFocus}
                    onBlur={onBlur}
                    onChangeText={onChange}
                    keyboardType="numeric"
                    autoCorrect={false}
                />
            </View>
        )
    }
}