import React, { Component } from 'react';
import { Image, StyleSheet, View } from 'react-native';
const style = StyleSheet.create({
    image: {
        marginBottom: 10
    },
    imageContainer: {
        alignItems: 'center'
    }
});
export class ProductItemImage extends Component {
    constructor() {
        super(...arguments);
        this.state = {
            calculatedImageStyle: {}
        };
        this.onLayout = (event) => {
            const { images, imageStyle } = this.props;
            const containerWidth = event.nativeEvent.layout.width;
            if (imageStyle) {
                return;
            }
            const image = images && images.find(img => !!img.uri) || this.props.image;
            if (image && image.uri) {
                Image.getSize(image.uri, (width, height) => {
                    const calculatedHeight = Math.round((containerWidth * height) / width);
                    this.setState({
                        calculatedImageStyle: {
                            width: containerWidth,
                            height: calculatedHeight
                        }
                    });
                }, () => {
                    return null;
                });
            }
        };
    }
    render() {
        const { images, imageStyle, imageContainerStyle, renderImage } = this.props;
        if (renderImage) {
            return renderImage();
        }
        const image = images && images.find(img => !!img.uri) || this.props.image;
        if (!image) {
            return null;
        }
        return (<View style={[style.imageContainer, imageContainerStyle]} onLayout={this.onLayout}>
        <Image resizeMode='contain' source={image} style={[style.image, this.state.calculatedImageStyle, imageStyle]}/>
      </View>);
    }
}
//# sourceMappingURL=ProductItemImage.js.map