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

interface LoginViewProps {
  goto: (name: string) => void;
  onValueChange: (value: string) => void;
  selected: any;
}

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

  return (
    <Container>
      <Headercontent
        textHeadr={'Skip'}
        type={'FontAwesome'}
        loginTitle={'Login'}
        onPressToPage={() => props.goto('App')}
      />
      <Content style={styles.content}>
        <View style={styles.login}>
          <Text style={styles.firstText}>{mobile}</Text>

          {Platform.OS === 'ios' && (
            <Form>
              <Item picker style={{ width: 0 }}>
                <PickerComponent
                  onValueChange={($value) => props.onValueChange($value)}
                  selected={props.selected}
                  jsonList={countries.countryList}
                />
              </Item>
              <Item fixedLabel last regular>
                <Input
                  style={styles.input}
                  keyboardType="number-pad"
                  placeholder="Enter Mobile Number"
                />
              </Item>
            </Form>
          )}
          {Platform.OS === 'android' && (
            <Form>
              <Grid>
                <Row>
                  <Col style={styles.picker}>
                    <Item picker regular>
                      <PickerComponent
                        onValueChange={($value) => props.onValueChange($value)}
                        selected={props.selected}
                        jsonList={countries.countryList}
                      />
                    </Item>
                  </Col>
                  <Col style={styles.inputNumber}>
                    <Item fixedLabel last regular>
                      <Input
                        style={styles.input}
                        keyboardType="number-pad"
                        placeholder="Enter Mobile Number"
                        autoFocus
                        maxLength={10}
                      />
                    </Item>
                  </Col>
                </Row>
              </Grid>
            </Form>
          )}

          <Grid>
            <Row>
              <Col style={styles.signButt}>
                <Button
                  style={styles.loginButton}
                  onPress={() => props.goto('Verify')}
                >
                  <Text style={styles.buttonText}>NEXT</Text>
                </Button>
              </Col>
            </Row>
          </Grid>
        </View>
      </Content>
    </Container>
  );
};
export default LoginView;
