import React, {useState} from 'react';
import {
  View,
  Text,
  Image,
  TouchableOpacity,
  StyleSheet,
  Alert,
  KeyboardAvoidingView,
  ScrollView,
  Platform,
  TouchableWithoutFeedback,
  Keyboard,
} from 'react-native';
import R from '../../assets/R';
import {connect} from 'react-redux';
import TextField from '../../components/Input/TextField';
import TextMulti from '../../components/Input/TextMulti';
import PickerDate from '../../components/Picker/PickerDate';
import PickerImg from '../../components/Picker/PickerImg';
import I18n from '../../helper/i18/i18n';
import HeaderBack from '../../components/Header/HeaderBack';
import {checkFormatArray, convertTime} from '../../Config/Functions';
import {showAlert, TYPE} from '../../components/DropdownAlert';
import PickerIdentify from '../../components/Picker/PickerIdentify';
import Button from '../../components/Button';
const GeneralInfor = (props) => {
  const [lastName, setLastName] = useState(props.user.l_name);
  const [firstName, setFirstName] = useState(props.user.f_name);
  const [phone, setPhone] = useState(props.user.phone);
  const [address, setAdress] = useState(props.user.address);
  const [birth, setBirth] = useState(new Date(props.user.birthday));

  const onNextPress = () => {
    const titles = [
      I18n.t('FirstLastName').toLowerCase(),
      I18n.t('Name').toLowerCase(),
      I18n.t('PhoneNumber').toLowerCase(),
      I18n.t('Address').toLowerCase(),
    ];
    const index = checkFormatArray([lastName, firstName, phone, address]);
    if (index === true) {
      props.navigation.navigate('Profile', {
        l_name: lastName,
        f_name: firstName,
        mobile: phone,
        birthday: convertTime(birth),
        address,
      });
    } else {
      showAlert(
        TYPE.WARN,
        I18n.t('Notification'),
        I18n.t('Please_fill_in') + titles[index],
      );
    }
  };

  const onSubmitFont = () => {};
  const onSubmitBack = () => {};
  const onSubmitSign = () => {};

  return (
    <View style={{flex: 1}}>
      <HeaderBack title={'AccountVerify'} />
      <KeyboardAvoidingView
        behavior={Platform.Os === 'ios' ? 'padding' : 'height'}
        style={{flex: 1}}
        keyboardVerticalOffset={-50}>
        <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
          <ScrollView showsVerticalScrollIndicator={false}>
            <View style={{flex: 1, paddingHorizontal: 10, paddingTop: 10}}>
              <TextField
                value={phone}
                isNumber={true}
                title={I18n.t('PhoneNumber')}
                onChangeText={(val) => setPhone(val)}
              />

              <TextMulti
                value={address}
                title={I18n.t('Address')}
                onChangeText={(val) => setAdress(val)}
              />
              <PickerIdentify
                callApi={onSubmitFont}
                title={I18n.t('FontOfIdentifyID')}
              />

              <PickerIdentify
                callApi={onSubmitBack}
                title={I18n.t('BacksideOfIdentifyID')}
              />

              <PickerIdentify
                callApi={onSubmitSign}
                title={I18n.t('SignPhoto')}
              />
              <View style={styles.btnSend}>
                <Button title={I18n.t('Confirm')} onClick={props.onPress} />
              </View>
              <View style={{height: 50}} />
            </View>
          </ScrollView>
        </TouchableWithoutFeedback>
      </KeyboardAvoidingView>
    </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,
  },
  btnSend: {
    width: '100%',
    marginVertical: 30,
  },
});

const mapStateToProps = (state) => {
  return {
    user: state.userReducer,
  };
};
export default connect(mapStateToProps, {})(GeneralInfor);
