/**
 * 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, Input } from 'native-base';
import { Text } from 'react-native';
import styles from './styles';
import Headercontent from '../../../components/redux/header';
import PickerComponent from '../../../components/redux/picker';
import { Col, Row, Grid } from 'react-native-easy-grid';
import countries from '../../../Database/data';

interface LoginViewProps {
    selectedCountry: string;
    phoneNumber: string;
    disableButton: boolean;
    skipLogin: () => void;
    onCountrySelect: (country:any) => void;
    onPhoneNumberChange: (num:string) => void;
    gotoVerfiy: () => void;
}

const LoginView = (props:LoginViewProps) => {
    const mobile = 'Please provide your Mobile number to Login/Sign Up on Store2Door';

    return (
        <Container>
            <Headercontent textHeadr={'Skip'} type={'FontAwesome'} loginTitle={'Login'} onPressToPage={props.skipLogin} />
            <Content padder style={styles.content}>
                <Grid style={{height:'100%'}}>
                    <Row >
                        <Text style={styles.firstText}>{mobile}</Text>
                    </Row>
                    <Row style={{borderColor:'grey', borderWidth:1, borderRadius:5}}>
                        <Col size={30}>
                            <PickerComponent
                             onSelectChange={props.onCountrySelect}
                             selectedValue={props.selectedCountry}
                             jsonList={countries.countryList}
                            />
                        </Col>
                        <Col size={70}>
                            <Input
                                style={styles.input}
                                placeholderTextColor='#adb4bc'
                                keyboardType={'phone-pad'}
                                returnKeyType='done'
                                autoCapitalize='none'
                                autoCorrect={false}
                                secureTextEntry={false} placeholder="Enter Mobile Number"
                                value={props.phoneNumber}
                                onChangeText={props.onPhoneNumberChange}
                                maxLength={10}
                            />
                        </Col>
                    </Row>
                    <Row style={{marginTop: 30}}>
                        <Col>
                            <Button full danger disabled={props.disableButton} onPress={props.gotoVerfiy}>
                                <Text style={{color:'#fff'}}>NEXT</Text>
                            </Button>
                        </Col>
                    </Row>
                </Grid>
            </Content>
        </Container>
    );
}
export default LoginView;
