import React from 'react';
import ReactNative from 'react-native';

const {
    Component,
} = React;

const {
    View,
    Image,
    PixelRatio,
    Platform,
    StyleSheet,
} = ReactNative;

const YH_ImageView = ReactNative.requireNativeComponent('YH_ImageView', null);
// import {CachedImage} from "react-native-img-cache";

/**
 *  原生图片
 *      圆角设置规则：
 *          ios写法：      masksToBounds={true} style中设置borderRadius圆角值
 *          android写法：  radius={{'topLeft':'20','topRight':'20','bottomRight':'20','bottomLeft':'20'}}
 *
 *      图片伸缩属性 resizeMode  enum('cover', 'contain', 'stretch', 'repeat', 'center') 同RN Image属性，
 *          注意要添加style属性的值 resizeMode: 'stretch'
 *
 *
 **/
export default class YH_Image extends Component {

    constructor(props) {
        super (props);
	}

    static getSlicedUrl(src, width, height, mode = 1) {
        if (!src) {
            return '';
        }

        // width = PixelRatio.getPixelSizeForLayoutSize(width);
        // height = PixelRatio.getPixelSizeForLayoutSize(height);

        width = Math.ceil(width * 2);
        height = Math.ceil(height * 2);

        let newSrc = src;
        if (src.indexOf('imageView') === -1 && src.indexOf('imageMogr') === -1) {
            newSrc = src + '?imageView2/' + mode + '/w/' + width + '/h/' + height;
        } else {
            newSrc = src.replace('{mode}', mode)
                .replace(/{width}/g, width)
                .replace(/{height}/g, height);
        }

        return newSrc;
    }

    render() {

        if (Platform.OS === 'ios') {
            return (

              // <CachedImage source={{ uri: this.props.url }} style = {this.props.style} mutable />

                <YH_ImageView
                    {...this.props}
                />
            );
        }
        else{
            let children = this.props.children;
            if(children){
                let style = StyleSheet.flatten(this.props.style);
                let {width, height} = style;
                return (
                    <View style = {this.props.style}>
                        <YH_ImageView style = {[this.props.style,{position: 'absolute', left: 0, top: 0, zIndex: -999, width, height}]}
                            url = {this.props.url} />
                        {children}
                    </View>
                );
            }
            else{
                return (
                    <YH_ImageView
                        {...this.props}
                    />
                );
            }
        }
    }
}