/**
 * 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 HeaderViewContainer from '../../../components/star/header/headerViewContainer';
import { Col, Row, Grid } from 'react-native-easy-grid';
import countries from '../../../Database/star';
import PickerComponent from '../../../components/star/picker/picker';

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

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

    return (
        <Container>
            <HeaderViewContainer
                headerTitle={'Login'}
                rightButtonText={'SKIP'}
                onPressToPage={onPressToPage}
            />
            <Content padder style={styles.content}>
                <Grid style={styles.gridStyle}>
                    <Row style={styles.contentCenter}>
                        <Text style={styles.firstText}>{mobile}</Text>
                    </Row>
                    <Row style={styles.rowContent}>
                        <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={styles.marginrow}>
                        <Col>
                            <Button full  onPress={props.gotoVerfiy} style={styles.loginButton}>
                                <Text style={styles.textColor}>NEXT</Text>
                            </Button>
                        </Col>
                    </Row>
                </Grid>
            </Content>
        </Container>
    );
}
export default LoginView;

