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

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 {
  checkFormatArray,
  convertTime,
  convertDate,
  renderStatus,
  getFontXD,
} from '../../../Config/Functions';
import {connect} from 'react-redux';

const GeneralInfor = (props) => {
  return (
    <KeyboardAvoidingView
      behavior={Platform.Os === 'ios' ? 'padding' : 'height'}
      style={{flex: 1}}
      keyboardVerticalOffset={-50}>
      <ScrollView showsVerticalScrollIndicator={false}>
        <View style={{flex: 1, paddingHorizontal: 10, paddingTop: 10}}>
          <View
            style={{
              width: '100%',
              paddingVertical: 10,
              flexDirection: 'row',
              justifyContent: 'space-between',
              alignItems: 'center',
            }}>
            <View style={{flex: 1}}>
              <Text
                style={{
                  fontSize: getFontXD(42),
                  color: R.colors.color777,
                  marginBottom: 5,
                }}>
                Trạng thái
              </Text>
            </View>
            <View style={{flex: 1}}>{renderStatus(props.user.status)}</View>
          </View>
          <View style={{flexDirection: 'row'}}>
            <View style={{flex: 1}}>
              <TextField
                editable={false}
                value={props.user.l_name}
                title={'Họ và tên đệm'}
              />
            </View>
            <View style={{width: 20}} />
            <View style={{flex: 1}}>
              <TextField
                value={props.user.f_name}
                editable={false}
                title={'Tên'}
              />
            </View>
          </View>
          <TextField
            value={props.user.phone}
            isNumber={true}
            editable={false}
            title={'Số điện thoại'}
          />
          <PickerDate
            valueString={convertDate(props.user.birthday)}
            disabled={true}
            title={'Ngày sinh'}
          />
          <TextMulti
            value={props.user.address}
            editable={false}
            title={'Địa chỉ'}
          />
          <View style={{height: 100}} />
        </View>
      </ScrollView>
    </KeyboardAvoidingView>
  );
};

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,
  },
});

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