
/**
 * 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, Text, Col, Left, Right, Item, Icon } from 'native-base';
import styles from './verficationStyle';
import Spinner from 'react-native-loading-spinner-overlay';
import OtpComponent from '../../../components/star/otp/otpComponent';
import HeaderViewContainer from '../../../components/star/header/headerViewContainer';
interface VerificationViewProps {
    gotoHome: () => void;
    goBack: () => void;
    showLeftTime: () => void;
    show: boolean
    oneTime: string
    spinner: any
}

const VerificationView = (props: VerificationViewProps) => {
    const { showLeftTime, show, oneTime } = props;
    const descText = 'Please enter Verification code sent On your device.';
    const spinnerText = 'Loading Data...'
    const iconName = 'arrow-back'
    const loginTitle = 'Verification Code'
    return (
        <Container>
            <HeaderViewContainer
                leftIcon={iconName}
                headerTitle={loginTitle}
                leftPress={() => props.goBack()}
            />
            <Content style={styles.container}>
                <Text style={styles.headText}>{descText}</Text>
                <OtpComponent />
                <Grid>
                    <Row>
                        <Col style={styles.signButt}>
                            <Button style={styles.loginButton} onPress={() => props.gotoHome()}>
                                <Text>VERIFY</Text>
                            </Button>

                        </Col>
                    </Row>
                    <Row style={styles.timeoutCount}>
                        <Col>
                            <Item style={styles.noBorderBot}>
                                <Left>
                                    <Button
                                        transparent
                                        onPress={showLeftTime}>
                                        <Text style={styles.resendColor}>Resend</Text>
                                    </Button>
                                </Left>
                                <Right>
                                    <Text>5:24 left</Text>
                                </Right>
                            </Item>
                            {show &&
                                <Item>
                                    <Text style={styles.onetimePass}><Icon name="checkmark-circle-outline" type='Ionicons' style={styles.onTimeIcon} />{oneTime}</Text>
                                </Item>
                            }
                        </Col>
                    </Row>
                </Grid>

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