/**
 * 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 from 'react';
import { Container, Content, Button, Row, Grid, Text, Col, Left, Right, Item } from 'native-base';
import Headercontent from '../../../components/grocery/header';
import styles from './verficationStyle';
import OtpComponent from '../../../components/grocery/otpComponent';
import Spinner from 'react-native-loading-spinner-overlay';

interface VerificationViewProps {
    goBack: () => void,
    gotoHome: () => void,
    spinner: boolean
}

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

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

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