campus_react_local/App/views/community/Answer/QuestionCreateAddImageViewC...

/**
 * Created by zack on 2018/5/23.
 */
import {
	View,
	Text,
	StyleSheet,
	TextInput,
	TouchableOpacity,
	Platform,
	FlatList,
	Image,
	NativeModules
} from 'react-native'
import React, {Component} from 'react'
import {NavigationBarHeight, TabBarHeight, ScreenDimensions} from '../../../utils/DimensionsTools'
import BaseNavigationBarStyle from '../../base/BaseNavigationBarStyle'
 import ImagePicker from 'react-native-image-crop-picker';
import ActionSheet from 'react-native-actionsheet'
import ToastMsg from '../../../utils/ToastMsg'
import HttpTools from '../../../network/HttpTools'
import {auth, question} from '../../../network/API'
import {GlobalMD5EncryptTool} from '../../../utils/GlobalEncryptTool'

const ImageListViewMaxHeight = 320
const ImageListItemWidth = ((ScreenDimensions.width - 56 - 30)/3.0)
const ImageListItemHeight = ((ScreenDimensions.width - 56 - 30)/3.0)

const ImageBaseUrl = 'https://links123-images.oss-cn-hangzhou.aliyuncs.com/'
//test png 0a682be491c4f2938a9c2a927c3bc16f.jpg   76b4fee490acc691f1421e9ed45a2a9b.jpeg

export default class QuestionCreateAddImageViewController extends Component {
	static navigatorButtons = {
		rightButtons: [
			{
				title: '发布', // for a textual button, provide the button title (label)
				id: 'Send', // id for this button, given in onNavigatorEvent(event) to help understand which button was clicked
				disabled: false, // optional, used to disable the button (appears faded and doesn't interact)
				buttonColor: '#449edc', // Optional, iOS only. Set color for the button (can also be used in setButtons function to set different button style programatically)
				buttonFontSize: 16,
			},
		],
	}

	constructor(props) {
		super(props)
		this.state = {
			imageListViewHeight: ImageListViewMaxHeight,
			selectedImagesMap: new Map(),
			questionTitle: props.questionTitle,
			questionDesc: ''
		}
	}

	componentDidMount() {
		this.props.navigator.setOnNavigatorEvent(event => {
			if (event.type === 'NavBarButtonPress') {
				if (event.id === 'Send') {
					// this.postQuestion()
					if (Platform.OS === 'ios') {
						this.props.navigator.dismissAllModals()
					}else {
						this.props.navigator.popToRoot()
					}
				}else if (event.id === 'cancel'){
					this.props.navigator.dismissModal()
				}
			}
		})
	}

	postQuestion() {
		let imageNames = []
		let imageBase64Strings = []

		for (let [url, imageInfo] of this.state.selectedImagesMap.entries()) {
			let urlStatementArrays = url.split('/')
			if (urlStatementArrays.length) {
				let fileFullName = urlStatementArrays[urlStatementArrays.length - 1]
				//MD5(filename + userID )
				let fileFullNameArray = fileFullName.split('.')
				let fileName = fileFullNameArray[0]
				let fileExtension = fileFullNameArray[1]
				let userId = "zack" //以后会使用USER id替代
				let timeStamp = (new Date()).getTime()

				let imageName = GlobalMD5EncryptTool.encrypt(userId + fileName + timeStamp + '')
				imageNames.push(imageName + '.' + fileExtension)
				imageBase64Strings.push(imageInfo.data)
			}
		}

		if (Platform.OS === 'ios') {
			const aliOSSModule = NativeModules.AliOSSModule
			aliOSSModule.uploadImages(imageNames, imageBase64Strings, (state) => {
			//	this.createNewQuestion(this.state.questionTitle, this.state.questionDesc, imageNames)
			})
		}else {
			//beginTask
			const aliOSSModule = NativeModules.AliOSSModule
			aliOSSModule.uploadImages(imageNames, imageBase64Strings, (state) => {
				alert(state)
				// this.createNewQuestion(this.state.questionTitle, this.state.questionDesc, imageNames)
			})
		}
	}
	
	androidUploadImage(imageName, imageBase64Strings) {
		const aliOSSModule = NativeModules.AliOSSModule

		aliOSSModule.uploadImage(imageNames[0], imageBase64Strings[0], (taksIndex)=> {

		} )
	}

	createNewQuestion(questionTitle, questionDesc, imageUrls) {
		const param = JSON.stringify({
			title: questionTitle,
			img_urls: imageUrls,
			content: questionDesc
		})

		HttpTools.post(question, param, (response) => {
			console.log(response)

			this.props.navigator.dismissAllModals(); //回到首页
		}, (error) => {
			console.log(error)
		})
	}


	goToGallery() {
		ImagePicker.openPicker({
			multiple: true,
			includeBase64: true,
			mediaType: 'photo',
			writeTempFile: false,
		}).then(images => {
			const imageMap = this.state.selectedImagesMap
			for(let i = 0; i < images.length; i ++) {
				const url = Platform.OS === 'ios' ? images[i].sourceURL : images[i].path
				imageMap.set(url, images[i])
			}

			if (imageMap.size > 9) {
				ToastMsg.show("最多还可以添加" + images.length - imageMap.size + '张图片!')
				// return
			}
			this.setState({selectedImagesMap: imageMap})
		});
	}

	openCamera() {
		ImagePicker.openCamera({
			width: 300,
			height: 400,
			cropping: true,
			includeBase64: true
		}).then(image => {
			const imageMap = this.state.selectedImagesMap
			const url = Platform.OS === 'ios' ? image.sourceURL : image.path
			imageMap.set(url, image)

			this.setState({selectedImagesMap: imageMap})
		});
	}

	deleteSelectedImage(key) {
		let selectedImageSources = this.state.selectedImagesMap
		selectedImageSources.delete(key)

		this.setState({selectedImagesMap: selectedImageSources})
	}

	showActionSheet() {
		this.ActionSheet.show()
	}

	actionSheetClickedIndex(index) {
		if (index === 1) {
			this.openCamera()
		}else if (index === 2)  {
			this.goToGallery()
		}
	}

	renderImageBgItem(rows) {
		let selectedImageSources = []
		let imageItems = []

		for (let [key, value] of this.state.selectedImagesMap.entries()) {
			selectedImageSources.push(value)
		}

		for (let i = 0; i < selectedImageSources.length; i ++) {
			const imageItem = this.renderImageItem(selectedImageSources[i], i)
			imageItems.push(imageItem)
		}

		//还需要添加一个add 图片的按钮，根据数量决定是否正确显示
		if (selectedImageSources.length < 9 ) {
			let addButtonItem = this.renderAddButton()
			imageItems.push(addButtonItem)
		}

		return(
			<View style={{backgroundColor: 'white', width: ScreenDimensions.width, flexDirection: 'row', flexWrap: 'wrap'}}>
				{imageItems}
			</View>
		)
	}

	renderImageItem(imageItem, i) {
		let marginLeft = 0
		if (i%3 === 0) {
			marginLeft = 28
		}else {
			marginLeft = 15
		}

		let marginRight = 0
		if (i%3 === 2) {
			marginRight = 28
		}else {
			marginRight = 0
		}

		let marginTop = 0
		if (i <= 2) {
			marginTop = 0
		}else {
			marginTop = 15
		}

		return (
			<View key = {i} style={{width: ImageListItemWidth, height: ImageListItemHeight, backgroundColor: 'white',
				marginLeft: marginLeft, marginRight: marginRight, marginTop: marginTop, marginBottom: 5}}>

				<Image
					source={{uri: imageItem.path}}
					style={{width: ImageListItemWidth, height: ImageListItemHeight}}/>
				<TouchableOpacity onPress={() => {
					const key = Platform.OS === 'ios' ? imageItem.sourceURL : imageItem.path
					this.deleteSelectedImage(key)
				}} style={{width: 21, height: 21, position: 'absolute', left: 10, top: 10, justifyContent: 'center', alignItems: 'center'}}>
					<Image source={require('../../../resources/images/TabBar/Community/Answer/close.png')}/>
				</TouchableOpacity>
			</View>
		)
	}

	renderAddButton() {
		return (
			<TouchableOpacity onPress={() => {
				this.showActionSheet()
			}} key = {9} style={{width: ImageListItemWidth, height: ImageListItemHeight, backgroundColor: 'white',
				marginLeft: (this.state.selectedImagesMap.size%6 === 0 ? 28 : 15), marginRight: 0, marginTop: (this.state.selectedImagesMap.size <=2 ? 0 : 15),
				marginBottom: 5}}>

				<Image
					source={require('../../../resources/images/TabBar/Community/Answer/add.png')}
					style={{width: ImageListItemWidth, height: ImageListItemHeight}}/>

			</TouchableOpacity>
		)
	}

	render() {

		return (
			<View style={styles.View}>
				<Text numberOfLines={2} style={styles.TitleText}>{this.state.questionTitle}</Text>

				<TextInput underlineColorAndroid={'transparent'} multiline={true} style={styles.TextInput} placeholderTextColor={'rgba(28, 28, 28, 0.18)'} placeholder={'添加描述和配图（选填）'}/>

				<View style={[styles.ImageListView,{height: this.state.imageListViewHeight, backgroundColor: 'white'} ]}>
					<FlatList
						data = {[['a',]]}
						renderItem={(item) => this.renderImageBgItem(item)}
						keyboardDismissMode = 'on-drag'
						keyExtractor = {(item,index) =>{
							return 'key' + item.key + index
						}}
					/>
				</View>

				<ActionSheet
					ref={o => this.ActionSheet = o}
					title={'Choose images to send.'}
					options={['Cancel', 'Take a photo', 'Select from album']}
					cancelButtonIndex={0}
					destructiveButtonIndex={-1}
					onPress={(index) => this.actionSheetClickedIndex(index)}
				/>

			</View>
		);
	}

}

const styles = StyleSheet.create({
	View: {
		width: ScreenDimensions.width,
		height: ScreenDimensions.height,
		backgroundColor: 'white'
	},
	TitleText: {
		fontSize: 17,
		color: '#4A4A4A',
		marginLeft: 28,
		marginTop: NavigationBarHeight.height + 57,
		width: ScreenDimensions.width - 28 - 10,
		textAlignVertical: 'top'
	},
	TextInput: {
		width: ScreenDimensions.width - 56,
		fontSize: 16,
		color: '#4A4A4A',
		marginLeft: 28,
		marginTop: 42,
		height: 44,
		paddingLeft: 0,
		paddingTop: 0,
		paddingRight: 0,
		paddingBottom: 0
	},
	ImageListView: {
		width: ScreenDimensions.width,
		backgroundColor: '#efeff4',
		marginTop: 32,
	},

})