
/**
 * React Native Full App (https://store.enappd.com/product/react-native-full-app)
 *
 * Copyright © 2019-present Enappd. All rights reserved.
 *
 * This source code is licensed as per the terms found in the
 * LICENSE.md file in the root directory of this source tree.
 */

import React, { Component } from 'react';
import { Container, Content, Button, Row, Grid, View, Text, Col, Left, Right, Item } from 'native-base';
import Headercontent from '../../../components/redux/header';
import styles from './verficationStyle';
import OtpComponent from '../../../components/redux/otpComponent';

interface VerificationViewProps {
    gotoHome: () => void;
    goBack: () => void;
    onTextChange: (otp:string) => void
    otpCode: string;
    verificationCode: string;
}

const VerificationView = (props:VerificationViewProps) => {
    const {
        gotoHome,
        goBack,
        onTextChange,
        otpCode,
        verificationCode
    } = props
    const descText = 'Please enter Verification code sent On your device.';
    const spinnerText = 'One moment...'
    return (
        <Container>
            <Headercontent name={'arrow-left'} type={'FontAwesome'} loginTitle={'Verification Code'} onPress={() => goBack()} />
            <Content style={styles.container}>
                <Text style={styles.headText}>{descText}</Text>
                <OtpComponent onTextChange={onTextChange} textValue={otpCode}/>
                <Grid>
                    <Row>
                        <Col>
                            <Button style={styles.loginButton} onPress={() => gotoHome()}>
                                <Text>VERIFY</Text>
                            </Button>

                        </Col>
                    </Row>
                    <Row style={styles.timeoutCount}>
                        <Col>
                            <Item>
                                <Left>
                                    <Text style={styles.resendColor}>Resend</Text>
                                </Left>
                                <Right>
                                    <Text>5:24 left</Text>
                                </Right>
                            </Item>
                        </Col>
                    </Row>
                </Grid>
                <Item>
                    <Text>{verificationCode}</Text>
                </Item>

                {/* <Spinner
                    visible={props.spinner}
                    textContent={spinnerText}
                    textStyle={styles.spinnerColor}
                /> */}
            </Content>
        </Container>
    )
}
export default VerificationView;
