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

import TextField from '../../../components/Input/TextField';
import TextMulti from '../../../components/Input/TextMulti';
import PickerItem from '../../../components/Picker/PickerItem';
import PickerDate from '../../../components/Picker/PickerDate';
import PickerImg from '../../../components/Picker/PickerImg';
import {getFontXD, HEIGHTXD, WIDTHXD} from '../../../Config/Functions';
import Icon from 'react-native-vector-icons/Ionicons';

Ionicons.loadFont()

const GeneralInfor = (props) => {
  const [Select, setSelect] = useState("ABC");

  return (
    <View style={styles.container}>
      <TextField title={'Họ và tên'} onChangeText={(val) => console.log(val)} />
      <TextField
        title={'Điện thoại'}
        onChangeText={(val) => console.log(val)}
      />

      <TextField
        title={'Email'}
        onChangeText={(val) => console.log(val)}
      />

      <TextInput
        style={styles.customTxt}
        onChangeText={(val) => console.log(val)} 
        placeholder="0000" 
      />

      <View style={styles.status}>
        <TouchableOpacity style={{flexDirection: 'row'}}>
          <Icon name="add-circle" />
          <Text style={{color: "#0B2031", paddingLeft: 5}}>Trạng thái</Text>
        </TouchableOpacity>
      
      <Text style={{color: "#4FCD8D"}}>Đã xác minh</Text>
      </View>

      <TextField 
        title={'Số tài khoản ngân hàng'} 
        onChangeText={(val) => console.log(val)} 
        placeHolder="Nhập số tài khoản ngân hàng" 
      />

      <PickerItem
        value={Select}
        onValueChange={(val) => setSelect(val)}
        title={'Tên ngân hàng'}
        data={{}}
      />

      <View style={styles.footer}>
        <TouchableOpacity
          onPress={() => console.log('Hello')}
          style={styles.btn}>
          <Text style={styles.txtBtn}>Cập nhật</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1, 
    paddingHorizontal: 10, 
    paddingVertical: 20, 
    marginHorizontal: 20
  },
  customTxt: {
      height: HEIGHTXD(110),
      color: 'black',
      borderRadius: 7,
      borderWidth: 0.7,
      borderColor: '#DBDBDB',
      fontSize: getFontXD(42),
      paddingVertical: 5,
      paddingHorizontal: 10,
      backgroundColor: 'white',
      shadowColor: '#AFA9A9',
      shadowOffset: {
        width: 0,
        height: 1,
      },
      shadowOpacity: 0.25,
      shadowRadius: 1.84,
      elevation: 1,
      marginTop: 50,
      marginBottom: 20
  },
  status: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    margin: 5
  },
  footer: {
    height: 200,
    justifyContent: 'center',
    alignItems: 'center',
  },
  btn: {
    width: WIDTHXD(521),
    height: HEIGHTXD(120),
    borderRadius: 15,
    backgroundColor: '#1C6AF6',
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 100
  },
  txtBtn: {
    color: R.colors.white,
    fontSize: getFontXD(52),
    textTransform: 'uppercase',
  },
});

export default GeneralInfor;
