import React, {useState} from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  Image,
  StyleSheet,
  Alert,
  KeyboardAvoidingView,
  ScrollView,
  Platform,
  Dimensions,
} from 'react-native';
import Button from '../../../components/Button';
import PickerImgUni from '../../../components/Picker/PickerImgUni';
import R from '../../../assets/R';
import TextField from '../../../components/Input/TextField';
import {connect} from 'react-redux';
import {showLoading, hideLoading} from '../../../actions/loadingAction';
import {
  checkFormatArray,
  getFontXD,
  convertTime,
  HEIGHTXD,
  WIDTHXD,
} from '../../../Config/Functions';
import PickerDate from '../../../components/Picker/PickerDate';

const {width} = Dimensions.get('window');

const Item = (props) => {
  return (
    <View style={styles.container}>
      <View style={{width: WIDTHXD(480), marginBottom: 5}}>
        <Text style={styles.txtTitle}>{props.title}:</Text>
      </View>

      <View style={{justifycontent: 'center', alignItems: 'center'}}>
        <Image style={styles.containerImg} source={{uri: props.linkImg}} />
      </View>
    </View>
  );
};

const Profile = (props) => {
  const renderType = (type) => {
    switch (type) {
      case 1:
        return 'Chứng minh nhân dân';
      case 2:
        return 'Hộ chiếu';
      default:
        return 'Căn cước công dân';
    }
  };
  return (
    <KeyboardAvoidingView
      behavior={Platform.Os === 'ios' ? 'padding' : 'height'}
      style={{flex: 1}}
      keyboardVerticalOffset={-50}>
      <ScrollView style={{flex: 1}} showsVerticalScrollIndicator={false}>
        <View
          style={{
            flex: 1,
            paddingHorizontal: 10,
            paddingTop: 10,
          }}>
          <TextField
            value={renderType(props.user.card_type)}
            editable={false}
            title={'Loại thẻ'}
          />

          <View
            style={{
              flexDirection: 'row',
              justifyContent: 'space-between',
              flexWrap: 'wrap',
              flex: 1,
            }}>
            <Item
              linkImg={props.user.identity_before}
              title={'Ảnh mặt trước CMND/CCCD'}
            />
            <Item
              linkImg={props.user.identity_after}
              title={'Ảnh mặt sau CMND/CCCD'}
            />
            <Item linkImg={props.user.sign_img} title={'Ảnh mặt chữ ký'} />
          </View>
        </View>
      </ScrollView>
    </KeyboardAvoidingView>
  );
};

const styles = StyleSheet.create({
  container: {
    marginTop: 10,
    width: WIDTHXD(480),
    alignItems: 'center',
  },
  btnSend: {
    width: '100%',
    marginBottom: 10,
  },
  txtTitle: {
    fontSize: getFontXD(42),
    color: R.colors.color777,
    marginBottom: 5,
  },
  containerImg: {width: WIDTHXD(350), height: HEIGHTXD(320), borderRadius: 5},
});

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