'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 SingleImage extends React.Component {
    constructor(props) {
        super(props);
		this.state = {
			width: Dimensions.get('window').width,
			height: 0,
		};
    }

	shouldComponentUpdate(nextProps,nextState){
		if (Immutable.is(nextProps.resource, this.props.resource) && nextState.height==this.state.height) {
			return false;
		} else {
			return true;
		}
	}

	componentDidMount() {
		let {resource} = this.props;
		let template_name = resource.get('data');
		let src = template_name.get('src');
       Image.getSize(src, (width, height) => {
         	this.setState({width, height});
       });
     }

    render() {
		let {resource} = this.props;
		let template_name = resource.get('data');
		let src = template_name.get('src');
		return (
			<View style={{width: Dimensions.get('window').width,height: (this.state.height/this.state.width)*Dimensions.get('window').width}}>
				<Image
					source={{uri: src}}
					style={{width: Dimensions.get('window').width,height: (this.state.height/this.state.width)*Dimensions.get('window').width}}
				>
				</Image>
			</View>
		);
		return null;
    }
};


let styles = StyleSheet.create({

});