'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');
        let imageHeight = template_name.get('height');
        let imageWidth = template_name.get('width');
        if (!imageHeight || !imageWidth) {
            Image.getSize(src, (width, height) => {
                if (this.imageView) {
                    this.setState({width, height});
                }
            });
        }
     }

    render() {
		let {resource} = this.props;
		let template_name = resource.get('data');
		let src = template_name.get('src');
        let imageHeight = template_name.get('height');
        let imageWidth = template_name.get('width');

        if (imageHeight && imageWidth) {
            return (
                <Image
                    source={{uri: src}}
                    style={{width: screenWidth,height: (imageHeight/imageWidth)*screenWidth}}
                />
            );
        }else {
            return (
    			<Image
                    ref={(ref)=>this.imageView=ref}
    				source={{uri: src}}
    				style={{width: screenWidth,height: (this.state.height/this.state.width)*screenWidth}}
    			/>
    		);
        }
    }
};

let screenWidth = Dimensions.get('window').width;
let imageView = null;
let styles = StyleSheet.create({

});