import React, {useState} from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  Image,
  StyleSheet,
  Alert,
  KeyboardAvoidingView,
  ScrollView,
  Platform,
  Dimensions,
  TouchableWithoutFeedback,
  Keyboard,
} 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 I18n from '../../../helper/i18/i18n';
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) => {
  console.log(props.user);
  const renderType = (type) => {
    switch (type) {
      case 1:
        return I18n.t('IdentityCard');
      case 2:
        return I18n.t('Passport');
      default:
        return I18n.t('CitizenIdentification');
    }
  };
  return (
    <KeyboardAvoidingView
      behavior={Platform.Os === 'ios' ? 'padding' : 'height'}
      style={{flex: 1}}
      keyboardVerticalOffset={-50}>
      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
        <ScrollView style={{flex: 1}} showsVerticalScrollIndicator={false}>
          <View
            style={{
              flex: 1,
              paddingHorizontal: 10,
              paddingTop: 10,
            }}>
            <TextField
              value={renderType(props.user.card_type)}
              editable={false}
              title={I18n.t('CardType')}
            />

            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'space-between',
                flexWrap: 'wrap',
                flex: 1,
              }}>
              <Item
                linkImg={props.user.identity_before}
                title={I18n.t('IdentityCitizenCardFrontPhoto')}
              />
              <Item
                linkImg={props.user.identity_after}
                title={I18n.t('IdentityCitizenCardBackPhoto')}
              />
              <Item linkImg={props.user.sign_img} title={I18n.t('SignPhoto')} />
            </View>
          </View>
        </ScrollView>
      </TouchableWithoutFeedback>
    </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);
