import React, { Component } from "react"
import { Image, View, Text, Modal, TouchableOpacity, StyleSheet,Button } from 'react-native';
import Icon from '../item/icon'

import BaseFunc from '../base/func'
import BaseSupport from '../base/support'

import { IformState, IformProp, IformOption } from '../aim/form'
var ImagePicker = require('react-native-image-picker');
import OperateForm from '../operate/form';
import OperateSync from '../operate/sync';

import { IbaseStyleExtend, IbaseDeviceEvent } from "../aim/face"


const options = {
  title: BaseFunc.upLang(12191), // specify null or empty string to remove the title
  cancelButtonTitle: BaseFunc.upLang(12002),
  takePhotoButtonTitle: BaseFunc.upLang(12193), // specify null or empty string to remove this button
  chooseFromLibraryButtonTitle: BaseFunc.upLang(12192), // specify null or empty string to remove this button
  cameraType: 'back', // 'front' or 'back'
  mediaType: 'photo', // 'photo' or 'video'
  videoQuality: 'medium', // 'low', 'medium', or 'high'
  durationLimit: 10, // video recording max time in seconds
  maxWidth: 1000, // photos only
  maxHeight: 1000, // photos only
  aspectX: 1, // android only - aspectX:aspectY, the cropping image's ratio of width to height
  aspectY: 1, // android only - aspectX:aspectY, the cropping image's ratio of width to height
  quality: 1, // 0 to 1, photos only
  angle: 0, // android only, photos only
  allowsEditing: true, // Built in functionality to resize/reposition the image after selection
  noData: true, // photos only - disables the base64 `data` field from being generated (greatly improves performance on large photos)
  storageOptions: { cameraRoll: true }
};

interface State extends IformState {
  avatarSource: any,
  imageArray,
  maxSize: number
}

interface Prop extends IformProp, IbaseStyleExtend {

}


interface ListProp {
  imageList: string
}

interface ListState {
  modalVisible: boolean
  currentImage: string
}

class ImageList extends Component<ListProp, ListState>{
  constructor(props) {
    super(props);
    this.state = { modalVisible: false, currentImage: '' }
  }

  pressImage(sUrl: string) {
    this.setState({ modalVisible: true, currentImage: sUrl })
  }
  render() {

    let oItem = BaseFunc.stringSplit(this.props.imageList);

    var aReturn = [];

    for (var i = 0; i < oItem.length; i++) {

      let sUrl = OperateSync.imageUpUrl(oItem[i]);
      aReturn.push(
        <TouchableOpacity style={styles.styleItemBox} key={i} onPress={() => {
          this.pressImage(sUrl);
        }} >
          <Image source={{ uri: sUrl }} style={styles.styleItemIcon} />
        </TouchableOpacity>
      );
    }
    return (
      <View style={{ flex: 1 }}>
        <Modal
          animationType={"none"}
          transparent={true}
          visible={this.state.modalVisible}
          onRequestClose={() => { }}

        >
          <View style={[styles.styleModalBox]}>
            
            <Image source={{ uri: this.state.currentImage }} style={styles.styleModalContent} />
            <Button title={BaseFunc.upLang(12003)} onPress={()=>{this.setState({modalVisible:false})}}></Button>
          </View>
        </Modal>
        <View style={[styles.styleLayoutCenter]}>




          {aReturn}
        </View>
      </View>
    )
  }


}




export default class extends Component<Prop, State> {

  constructor(props: Prop) {
    super(props);

    var sValue = OperateForm.upFormValue(props.name, props.formDefaultValue != undefined ? props.formDefaultValue : '');


    //默认情况下只能一张
    let iMaxSize = 1;
    if (props.formMaxSize != undefined) {
      iMaxSize = parseInt(props.formMaxSize);
    }



    this.state = { currentValue: sValue, avatarSource: null, imageArray: [], maxSize: iMaxSize };

  }

  takePicture() {

    let that = this;

    ImagePicker.showImagePicker(options, (response) => {
      //console.log('Response = ', response);

      if (response.didCancel) {
        //console.warn('User cancelled image picker');
      }
      else if (response.error) {
        //console.warn('ImagePicker Error: ', response.error);
      }
      else if (response.customButton) {
        //console.warn('User tapped custom button: ', response.customButton);
      }
      else {
        //let source = { uri: response.uri };

        // You can also display the image using data:
        // let source = { uri: 'data:image/jpeg;base64,' + response.data };

        let sNewValue = '';
        //默认设置为jpg格式  如果有后缀则取后缀名字
        let sFileAttr = '.jpg';
        if (response.fileName) {
          sFileAttr = response.fileName.split('.')[1].toLowerCase();
        }
        else if (response.uri) {
          sFileAttr = response.uri.split('.')[1].toLowerCase();
        }


        let sNewName = "img/" + BaseSupport.upNowDay() + "/" + BaseSupport.upUuid() + "." + sFileAttr;

        OperateSync.imageInData(sNewName, { localUrl: response.uri, orignUrl: response.origURL });

        if (this.state.maxSize == 1) {
          sNewValue = sNewName;
        } else {
          sNewValue = BaseFunc.stringArrayOption(this.state.currentValue, sNewName, 1);
        }

        //console.warn(sNewValue);

        that.setState({
          currentValue: sNewValue
        });

        OperateForm.inFormValue(this.props.name, sNewValue);


        OperateSync.syncImage();

        //console.warn(JSON.stringify(response));
        //Aliyun.saveFile('a4.jpg', response.data);
        //Aliyun.uploadBlob(sNewName, response.origURL);
        //Aliyun.uploadFile('abcd/f.html','abcdefghh');
        // uri (on iOS)
        //const source = {uri: response.uri.replace('file://', ''), isStatic: true};
        // uri (on android)
        //const source = {uri: response.uri, isStatic: true};
        //fLoading(true);
        //SFuncApi.uploadFile(response.uri, (o) => { fLoading(false); fCallBack(o.resultObject); });
        //fetch('',opt).then((response)=>
      }
    });
  }


  render() {
    return (
      <View style={[styles.styleMainView]}>
        {
          OperateForm.upFormType(this.props.name) != "book" ?
            <TouchableOpacity style={styles.styleMainTouch} onPress={this.takePicture.bind(this)}>
              <Icon style={[styles.styleMainIcon, this.props.styleMainIcon]} pName="camera" />

            </TouchableOpacity>
            : null}
        <ImageList imageList={this.state.currentValue} ></ImageList>

      </View>
    );
  }
}

const styles: IbaseStyleExtend = {
  styleMainTouch: {
    paddingLeft: 10,
    paddingRight: 10
  },
  styleMainView: {

    flexDirection: 'row',
  },
  styleMainIcon: {
    fontSize: 60,


  },
  styleLayoutCenter: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    flex: 1
  },

  styleItemBox: {

  },

  styleItemIcon: {
    width: 60,
    height:60,
    margin: 5,
    borderWidth: 1,
    borderColor: '#ebebeb'
  },
  styleModalBox: {
    flex: 1,


    backgroundColor: "rgba(0, 0, 0, 0.5)"
  },
  styleModalContent: {
    flex: 1
  }
};