'use strict';

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

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

export default class SlicedImage extends React.Component {

    static propTypes = {
        source: Image.propTypes.source,
    };

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

        width = PixelRatio.getPixelSizeForLayoutSize(width);
        height = PixelRatio.getPixelSizeForLayoutSize(height);
        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);
        }

        // __DEV__ && console.log(newSrc);

        return newSrc;
    }

    constructor(props) {
        super (props);

        // http://developer.qiniu.com/code/v6/api/kodo-api/index.html#image
        this.mode = 1;
    }

    setNativeProps(nativeProps) {
        this._root.setNativeProps(nativeProps);
    }

    _generateImageUrl(src) {
        let style = StyleSheet.flatten(this.props.style);
        let {width, height} = style;
        let newSrc = SlicedImage.getSlicedUrl(src, width, height, this.mode);
        return newSrc;
    }

    _isRemoteImageSrc(src) {
        let prefix = 'http';
        if (src.toLowerCase().substr(0, prefix.length) === prefix) {
            return true;
        }

        return false;
    }

    render() {
        let {source} = this.props;
        if (source && source.uri && this._isRemoteImageSrc(source.uri)) {
            let uri = this._generateImageUrl(source.uri);
            return (
                <Image ref={component => this._root = component} {...this.props} source={{uri}}/>
            );
        }

        return (
            <Image ref={component => this._root = component} {...this.props}/>
        );
    }
}