/**
 * Created by misty on 2019/06/05.
 */
'use strict';
import React, {Component} from "react";
import ReactNative ,{
  Dimensions,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  TextInput,
  ScrollView,
  Platform,
  Image,
  InteractionManager,
} from "react-native";

import Prompt from "../../common/components/Prompt";
import YH_Image from "../../common/components/YH_Image";
import YH_ActionSheet from "../../common/components/YH_ActionSheet";
import ImagePicker from 'react-native-image-picker';
import LoadingIndicator from '../../common/components/LoadingIndicator';

export default class NameAuthen extends Component {
    constructor(props) {
        super(props);
        this.state = {
          isBack: false,
          backIDCardImageUri: '',
          frontIDCardImageUri: '',
        }

        this.renderHeader = this.renderHeader.bind(this)
        this.renderMeritCell = this.renderMeritCell.bind(this)
        this.renderIDCardAddDetailCell = this.renderIDCardAddDetailCell.bind(this)
        this.actionsheetItemClick = this.actionsheetItemClick.bind(this)
    }

    renderHeader(title) {
        return <View style={styles.headerDetailContainer}>
                  <View style={{width: width, height: 0.5, backgroundColor: '#e0e0e0'}}/>
                  <Text style={styles.headerTitle} numberOfLines={1}>{title}</Text>
               </View>
    }

    renderMeritCell(title) {
        return <View style={styles.meritCell}>
                  <View style={styles.meritAnnotation}/>
                  <Text style={styles.headerDetailTitle}>{title}</Text>
              </View>
    }

    renderIDCardAddDetailCell() {
        return (
          <View style={styles.renderIDCardAddDetailCell}>
            {this.renderIDCardAddCellImage(false)}
            {this.renderIDCardAddCellImage(true)}
          </View>
        )
    }

    renderIDCardAddCellImage(isBack) {
      let title = isBack ? '反面照片' : '正面照片';
      let cardImage = isBack ? require('../images/cardBack.png') :  require('../images/cardFront.png');
      let addImage = isBack ? require('../images/addBack.png') :  require('../images/addFront.png');
      let imageUrl = isBack ? this.state.backIDCardImageUri : this.state.frontIDCardImageUri;
      let hasImage = imageUrl.length > 0 ? true : false;
      return (
          <View style={[styles.renderIDCardAddCellImage]}>
             <TouchableOpacity activeOpacity={1.0}
                onPress={() => {
                  if(!hasImage){
                    this.setState({
                      isBack,
                    })
                    this.refs.YH_ActionSheet.showModal();
                  }
                }}>
              {hasImage ?
                <YH_Image resizeMode="contain" url={imageUrl} style={styles.viewImage}/>
              :
              <Image resizeMode={'contain'} source={addImage} style={styles.viewImage}/>
              }
            </TouchableOpacity>
            <TouchableOpacity hitSlop={{top: 3, left: 3, bottom: 3, right: 3}} activeOpacity={1.0} style={styles.addImageClose}
                onPress={() => {
                  if(isBack){
                    this.setState({
                      backIDCardImageUri: '',
                    })
                  }else {
                    this.setState({
                      frontIDCardImageUri: '',
                    })
                  }
                }}>
                 {hasImage ?
                   <Image style={{height: 16,width: 16}} source={require('../images/imageShareClose.png')}/>
                : null}
            </TouchableOpacity>

            <View style={styles.renderIDCardSampleCellImage}>
                <Image style={styles.cardImage} source={cardImage}/>
                <Text style={styles.cardImageEGtip}>（示例）</Text>
            </View>

          </View>
      )
    }

    actionsheetItemClick(id){
      this.props.showLoading && this.props.showLoading(true);
      let that = this;
      if(id == 1){
          ReactNative.NativeModules.YH_MarketHelper.goUFOIDCardCameraVC(this.state.isBack).then(data => {
              InteractionManager.runAfterInteractions(() => {
                that.refs.YH_ActionSheet.cancelModal();
                if(that.state.isBack){
                  that.setState({
                    backIDCardImageUri: data,
                  })
                }else {
                  that.setState({
                    frontIDCardImageUri: data,
                  })
                }
                that.props.showLoading && that.props.showLoading(false);
              });
          })
          .catch(error => {
              that.refs.YH_ActionSheet.cancelModal();
              that.props.showLoading && that.props.showLoading(false);
          });
      }else if(id == 2){

        if(Platform.OS == 'ios'){
            let  options = {
              storageOptions: {
                skipBackup: true,
                path: 'images',
              },
            };
            ImagePicker.launchImageLibrary(options, (response) => {
              InteractionManager.runAfterInteractions(() => {
                console.log(response);
                that.refs.YH_ActionSheet.cancelModal();
                let uri = response ? response.uri : '';
                if(uri){
                  if(that.state.isBack){
                    that.setState({
                      backIDCardImageUri: uri,
                    })
                  }else {
                    that.setState({
                      frontIDCardImageUri: uri,
                    })
                  }
                }
                that.props.showLoading && that.props.showLoading(false);
              });
            });
        }
        else{
            ReactNative.NativeModules.YH_MarketHelper.goPhotoVC().then(data => {
              InteractionManager.runAfterInteractions(() => {
                that.refs.YH_ActionSheet.cancelModal();
                if(that.state.isBack){
                  that.setState({
                    backIDCardImageUri: data,
                  })
                }else {
                  that.setState({
                    frontIDCardImageUri: data,
                  })
                }
                that.props.showLoading && that.props.showLoading(false);
              });
          })
          .catch(error => {

          });
        }
      }
    }

    render() {
        let buttonDisabled = this.state.backIDCardImageUri.length == 0 || this.state.frontIDCardImageUri.length == 0
        let isShowToast = this.props.isShowToast;
        let toastMessage = this.props.toastMessage;

        return <View style={styles.mainContainer}>
            <ScrollView style={styles.mainContainer}
                        keyboardShouldPersistTaps={'handled'}>

                {this.renderHeader('请上传身份证照片')}
                {this.renderMeritCell('请上传原始比例清晰的身份证正反面。请勿进行裁剪涂改，否则无法通过审核。')}
                {this.renderMeritCell('照片格式支持jpg、jpeg、png。')}
                {this.renderMeritCell('身份证照片信息将加密处理，仅用于提现财务用途。')}
                {this.renderMeritCell('身份证信息需与提现银行卡信息匹配，否则无法正常提现成功。')}

                {this.renderIDCardAddDetailCell()}

                <TouchableOpacity style={[styles.submitButton, buttonDisabled ? styles.disabledButton : {}]}
                                  disabled={buttonDisabled}
                                  onPress={()=> {
                                      if (this.state.backIDCardImageUri.length > 0 && this.state.frontIDCardImageUri.length > 0) {
                                        this.props.bindIdentityCard && this.props.bindIdentityCard(this.state.frontIDCardImageUri, this.state.backIDCardImageUri);

                                      }
                                  }}>
                    <Text style={styles.buttonText}>{'提交'}</Text>
                </TouchableOpacity>

            </ScrollView>

            {isShowToast ? <Prompt
                text={toastMessage}
                duration={800}
                onPromptHidden={this.props.hideToastMessage}
              /> : null}

            <YH_ActionSheet
              ref="YH_ActionSheet"
              items={[{title:'拍照',id:'1'},{title:'从相册中选择',id:'2'}]}
              actionsheetItemClick={this.actionsheetItemClick}
              modalTitle={""} />

            <LoadingIndicator
                isVisible={this.props.isShowLoading}
            />
        </View>
    }
}

const { width } = Dimensions.get('window');
let styles = StyleSheet.create({
    mainContainer: {
      flex: 1,
      backgroundColor: 'white',
    },
    headerDetailContainer: {
      backgroundColor: 'white',
    },
    headerTitle: {
      marginLeft: 15,
      marginTop: 20,
      fontFamily: 'PingFang-SC-Medium',
      fontSize: 17,
      color: '#444444',
      letterSpacing: 0,
      fontWeight: 'bold',
    },
    meritCell: {
      marginTop: 10,
      flexDirection: 'row',
      paddingLeft: 15,
      paddingRight: 10,
    },
    meritAnnotation: {
      width: 3,
      height: 3,
      borderRadius: 1.5,
      backgroundColor: '#B0B0B0',
      marginTop: 8,
    },
    headerDetailTitle: {
      fontFamily: 'PingFang-SC-Regular',
      fontSize: 14,
      color: '#B0B0B0',
      letterSpacing: 0,
      marginLeft: 5,
    },

    cell: {
      height: 50,
      alignItems: 'center',
      flexDirection: 'row',
      paddingLeft: 15,
      paddingRight: 15,
    },
    cellTitle: {
      fontSize: 14,
      fontFamily: 'PingFang-SC-Regular',
      color: '#444444',
    },
    textInput: {
      fontSize: 14,
      marginLeft: 22,
      fontFamily: 'PingFang-SC-Regular',
      color: '#B0B0B0',
    },
    imageText: {
      fontFamily: 'PingFang-SC-Regular',
      color: '#B0B0B0',
      fontSize: 14,
    },
    buttonText: {
      color: 'white',
      fontSize: 14,
      fontWeight: 'bold',
    },
    submitButton: {
      marginLeft: 15,
      marginRight: 15,
      marginTop: 44,
      height: 44,
      borderRadius: 4,
      backgroundColor: '#444444',
      alignItems: 'center',
      justifyContent: 'center',
    },
    disabledButton: {
      backgroundColor: '#CCCCCC'
    },
    line: {backgroundColor: '#EEEEEE', left: 20, right: 20, bottom: 0, height: 1, position: 'absolute'},

    renderIDCardAddDetailCell: {
      flexDirection: 'row',
      marginTop: 15,
      marginLeft: 5,
      marginRight: 5,
      justifyContent: 'center',
      alignItems: 'center',
    },
    renderIDCardAddCellImage: {
      width: (width-10)/2,
    },
    viewImage:{
      width: (width-50)/2,
      height: 101,
      marginTop: 5,
      marginLeft: 10,
      marginRight: 10,
      backgroundColor: 'transparent',
    },
    addImage: {
      height: 30,
      width: 30,
    },
    addImageClose: {
      position: 'absolute',
      height: 16,
      width: 16,
      top: 0,
      left: (width-50)/2+2,
    },
    renderIDCardSampleCellImage: {
      width: (width-30)/2,
      marginTop: 30,
      alignItems: 'center'
    },
    cardImage: {
      width: 80,
      height: 50,
    },
    cardImageEGtip: {
      height: 13,
      width: 80,
      marginTop: 4,
      fontFamily: 'PingFang-SC-Regular',
      fontSize: 9,
      color: '#999999',
      letterSpacing: 0,
      textAlign: 'center',
    },
})