'use strict';

import React from 'react';
import ReactNative from 'react-native';
import Immutable, {Map} from 'immutable';

const {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  ListView,
  Dimensions,
  TouchableOpacity,
} = ReactNative;


export default class Small_pic extends React.Component {
    constructor(props) {
        super(props);
		this.state = {
			width0: 1,
			width1: 1,
			height0: 1,
			height1: 1,
		};
    }

	componentDidMount() {
		let {resource} = this.props;
		let data = resource.get('data')?resource.get('data').toJS():null;
		let url1 = data?data[0].src:null;
		let url2 = data?data[1].src:null;
       Image.getSize(url1, (width, height) => {
         	this.setState({width0 : width, height0 : height});
       });
	   Image.getSize(url2, (width, height) => {
		   this.setState({width1 : width, height1 : height});
	   });
     }

    render() {
		let {resource} = this.props;
		let data = resource.get('data')?resource.get('data').toJS():null;
		let url1 = data?data[0].src:null;
		let url2 = data?data[1].src:null;
		if (!url1 || !url2) {
			return null;
		}
		return (
			<View style={styles.Small_pic}>
				<Image source={{uri: url1}} style={{width: width/2,height: (width/2)*(this.state.height0/this.state.width0)}} ></Image>
				<Image source={{uri: url2}} style={{width: width/2,height: (width/2)*(this.state.height1/this.state.width1)}} ></Image>
			</View>
		);
    }
};

let {width, height} = Dimensions.get('window');
let styles = StyleSheet.create({
	Small_pic: {
		flexDirection: 'row',
		flex: 1,
		backgroundColor: 'white'
	},
	thumb: {

	}
});