import React, {useState} from 'react';
import {View, Text, Image, TouchableOpacity, StyleSheet} from 'react-native';
import R from '../../../assets/R';

import TextField from '../../../components/Input/TextField';
import TextMulti from '../../../components/Input/TextMulti';
import PickerDate from '../../../components/Picker/PickerDate';
import PickerImg from '../../../components/Picker/PickerImg';

const GeneralInfor = (props) => {
  const [birth, setBirth] = useState(new Date());

  return (
    <View style={{flex: 1, paddingHorizontal: 10, paddingTop: 10}}>
      <TextField title={'User name'} onChangeText={(val) => console.log(val)} />
      <TextField
        title={'Sponsor ID'}
        onChangeText={(val) => console.log(val)}
      />
      <View style={{flexDirection: 'row'}}>
        <View style={{flex: 1}}>
          <TextField title={'Tên'} onChangeText={(val) => console.log(val)} />
        </View>
        <View style={{width: 20}} />
        <View style={{flex: 1}}>
          <TextField title={'Họ'} onChangeText={(val) => console.log(val)} />
        </View>
      </View>
      <TextField
        title={'Số điện thoại'}
        onChangeText={(val) => console.log(val)}
      />
      <PickerDate
        value={birth}
        onValueChange={(val) => setBirth(val)}
        title={'Ngày sinh'}
      />

      <TextMulti title={'Địa chỉ'} onChangeText={(val) => console.log(val)} />
      <TouchableOpacity
        onPress={() => {
          props.navigation.navigate('Profile');
        }}
        style={styles.btnNext}>
        <Image style={{width: 30, height: 30}} source={R.images.iconRight1} />
      </TouchableOpacity>
      <View style={{height: 100}} />
    </View>
  );
};

const styles = StyleSheet.create({
  btnNext: {
    borderRadius: 30,
    backgroundColor: '#1473E6',
    width: 50,
    height: 50,
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 20,
    alignSelf: 'flex-end',
    elevation: 2,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.15,
    shadowRadius: 1.84,
  },
});

export default GeneralInfor;
