import React, { Component } from 'react';
import styles from '../style';
import { Text, View, StyleSheet, Image,Button,TextInput,TouchableHighlight, Alert,
  DatePickerAndroid, TouchableWithoutFeedback, Keyboard, ScrollView, DatePickerIOS} from 'react-native';
import Icon from 'react-native-vector-icons/SimpleLineIcons';
import {Platform} from 'react-native';
import { createStackNavigator } from 'react-navigation';

export default class Signup extends Component {
  constructor(props) {
    super(props);
    this.state = {
      titleText: "Date of Bird",
      firstName: '',
      lastName: '',
      email: '',
      phoneNumber:'',
      spinnerText: '',
      data: null,
      chosenDate: new Date()
    };
    this.setDate = this.setDate.bind(this);
  }

  state = {
    spinnerDate: new Date(),
    spinnerText: 'Date of Bird',
  };

  setDate(newDate) {
    this.setState({chosenDate: newDate})
  }

showPicker = async (stateKey, options) => {
    try {
      var newState = {};
      const {action, year, month, day} = await DatePickerAndroid.open(options);
      if (action === DatePickerAndroid.dismissedAction) {
        newState[stateKey + 'Text'] = 'dismissed';
      } else {
        var date = new Date(year, month, day);
        newState[stateKey + 'Text'] = date.toLocaleDateString();
        newState[stateKey + 'Date'] = date;
      }
      this.setState(newState);
    } catch ({code, message}) {
      console.warn(`Error in example '${stateKey}': `, message);
    }
  };


  changeFirst(firstName){
    this.setState({firstName})
  }

  changeLast(lastName){
    this.setState({lastName})
  }

  changeEmail(email){
    this.setState({email})
  }

  changePhone(phoneNumber){
    this.setState({phoneNumber})
  }

  changeDate(spinnerText){
    this.setState({spinnerText})
  }

  render() {
    return (
      <ScrollView>
      <View style={styles.container}>
      <Image
          source={require('../assets/background5.png')}
          style={styles.bgapp}
        />
         <Image
          source={require('../assets/icon.png')}
          style={styles.logosign}
        />
          <Text style={{fontSize:15, color:'white',marginBottom: 30,}}>A C K N O W L O G Y</Text>
        <View style={styles.timeline}>
        <View style={styles.block}>
        <Text style={styles.active}>1</Text>
        <Text style={styles.personal}>Personal Info</Text>
        </View>
        <View style={styles.block}>
        <Text style={styles.inactive}>2</Text>
        <Text style={styles.personal}>Company Info</Text>
        </View>
        <View style={styles.block}>
        <Text style={styles.inactive}>3</Text>
        <Text style={styles.personal}>Upload Photo</Text>
        </View>
        </View>

        <View style={styles.form}>
        <Text style={styles.tittleSignUp}>SIGN UP</Text>
        <View style={styles.inputSignup}>
          <TextInput
            placeholder="First Name"
            placeholderTextColor= "#9fafb7"
            style={styles.input}
            value={this.state.firstName}
            onChangeText={(firstName) => this.changeFirst(firstName)}
          />
          <Icon name="people" size={20} color="#9fafb7"/>
          </View>
          <View style={styles.inputSignup}>
            <TextInput
            placeholder="Last Name"
            placeholderTextColor= "#9fafb7"
            style={styles.input}
            value={this.state.lastName}
            onChangeText={(lastName) => this.changeLast(lastName)}
            />
            <Icon name="people" size={20} color="#9fafb7"/>
          </View>
          <View style={styles.inputSignup}>
            <TextInput
            placeholder="E-mail"
            keyboardType="email-address"
            placeholderTextColor= "#9fafb7"
            style={styles.input}
            value={this.state.email}
            onChangeText={(email) => this.changeEmail(email)}
            />
            <Icon name="envelope" size={20} color="#9fafb7"/>
          </View>
          <View style={styles.inputSignup}>
            <TextInput
            placeholder="Phone"
            keyboardType="numeric"
            placeholderTextColor= "#9fafb7"
            style={styles.input}
            value={this.state.phoneNumber}
            onChangeText={(phoneNumber) => this.changePhone(phoneNumber)}
            />
            <Icon name="phone" size={20} color="#9fafb7"/>
          </View>
         { (Platform.OS === 'android') ? <View style={styles.inputSignup}>
           <TouchableHighlight
            style={styles.input}
            onPress={this.showPicker.bind(this, 'spinner',
             {date: this.state.spinnerDate, mode: 'spinner'})}
            underlayColor={'transparent'}>
            <TextInput
            placeholder="Date of Bird"
            editable={false}
            placeholderTextColor= "#9fafb7"
            textStyle={{color: '#9fafb7'}}
            style={{color: '#9fafb7',flex: 1,}}
            value={this.state.spinnerText}
            onChangeText={(spinnerText) => this.changeDate(spinnerText)}

             />
           </TouchableHighlight>
          </View> : //Inicia el Datepick para ios
          <View style={{marginBottom:1, marginTop:1}}>
          <Text style={{color: '#9fafb7',textAlign:'center'}}>Date Of Bird</Text>
         <TouchableHighlight
            style={styles.input}>
           <DatePickerIOS
          date={this.state.chosenDate}
          onDateChange={this.setDate}
          mode='date'
        />
        </TouchableHighlight>
          </View>
         }
          <View style = {{justifyContent: "center",
                          alignItems: "center",}}>
          <TouchableHighlight
            style = {styles.buttonContinue}
            onPress={() => {this.props.navigation.navigate('signuptwo', {
              firstName: this.state.firstName,
              lastName: this.state.lastName,
              email: this.state.email,
              phoneNumber: this.state.phoneNumber,
              spinnerText: this.state.spinnerText,})}}
            underlayColor={'#9fafb7'}
            >
            <Text style ={{color:'white',
                            fontSize: 19,
                            }}>CONTINUE</Text>
          </TouchableHighlight>
        </View>
        </View>
      </View>
      </ScrollView>
    );
  }
}