'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,
  Platform,
} = ReactNative;


function getRandom(imageHeight,imageWidth,tagList) {
    let tagListSize = tagList?tagList.length:0;
    let list = tagList;
    let tagHeigthSize = Math.ceil((imageHeight/(tagHeigth+5))-2);

    //最多处理tagHeigthSize个
    if (tagListSize > tagHeigthSize) {
        list = tagList.slice(0,tagHeigthSize);
    }
    for (var i = 0; i < list.length; i++) {
        let item = list[i];
        item.right = Math.ceil(Math.random()*(imageWidth/3)+1);
        item.topCount = deDuplicating(tagHeigthSize,tagList);

    }
    return list;
}

function deDuplicating(tagHeigthSize,tagList) {
    let randomH = Math.ceil(Math.random()*(tagHeigthSize-1)+1);
    for (var i = 0; i < tagList.length; i++) {
        let item = tagList[i];
        if (item.topCount  == randomH) {
            randomH = deDuplicating(tagHeigthSize,tagList);
            break;
        }
    }
    return randomH;
}

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 linkUrl = template_name.get('url');
        let imageHeight = template_name.get('height');
        let imageWidth = template_name.get('width');
        let tagList = template_name?template_name.get('tagList'):null;
            tagList = tagList?tagList.toJS():[];

        if (imageHeight && imageWidth) {
            tagList = getRandom((imageHeight/imageWidth)*screenWidth,screenWidth,tagList);
            return (
                <View style={{width: screenWidth,height: (imageHeight/imageWidth)*screenWidth,marginLeft: 10}}>
                    {linkUrl?<TouchableOpacity activeOpacity={0.5} onPress={() => {
                        this.props.onPressLink && this.props.onPressLink(linkUrl);
                    }}>
                        <Image
                            source={{uri: src}}
                            style={{width: screenWidth,height: (imageHeight/imageWidth)*screenWidth}}
                        />
                    </TouchableOpacity>:<Image
                        source={{uri: src}}
                        style={{width: screenWidth,height: (imageHeight/imageWidth)*screenWidth}}
                    />}
                    {tagList?tagList.map((value, i) => {
                        return (
                            <View
                                key={'values' + i}
                                style={{
                                    maxWidth: screenWidth - value.right,
                                    height: tagHeigth,
                                    position: 'absolute',
                                    right:  value.right,
                                    top: value.topCount*(tagHeigth+5),
                                    backgroundColor: 'transparent',
                                    flexDirection: 'row',
                                    justifyContent: 'flex-end',
                                    alignItems: 'center',
                                    borderRadius: 10,
                                }}
                            >
                                <Image source={require('../../image/KA_dian.png')} style={styles.icon} resizeMode={'contain'}></Image>
                                <TouchableOpacity  activeOpacity={0.5} onPress={() => {
                                    let pos_id = 102;
                                    this.props.onPressProduct && this.props.onPressProduct(value.product_skn,i,pos_id);
                                }}>
                                    <View style={styles.tagView}>
                                        <Text style={{
                                            maxWidth: screenWidth - value.right - 2*tagHeigth - 20,
                                            color: 'white',
                                            paddingLeft: 10,
                                            backgroundColor: 'transparent',
                                        }} numberOfLines={1}>{value.tagName}</Text>
                                        <TouchableOpacity style={styles.button} activeOpacity={0.5} onPress={() => {
                                            let pos_id = 105;
                                            let product_id = value.product_id?value.product_id:'';
                                            this.props.onPressShopCar && this.props.onPressShopCar(value.product_skn,product_id,pos_id);
                                        }}>
                                            <Image source={require('../../image/dian_gwc_bt.png')} style={styles.image} resizeMode={'contain'}></Image>
                                        </TouchableOpacity>
                                    </View>
                                </TouchableOpacity>
                            </View>
                        );
                    }):null}
                </View>
            );
        }else {
            return (
                <View style={{width: screenWidth,height: (this.state.height/this.state.width)*screenWidth}}>
                    {linkUrl?<TouchableOpacity activeOpacity={0.5} onPress={() => {
                        this.props.onPressLink && this.props.onPressLink(linkUrl);
                    }}>
                        <Image
                            ref={(ref)=>this.imageView=ref}
                            source={{uri: src}}
                            style={{width: screenWidth,height: (this.state.height/this.state.width)*screenWidth}}
                        />
                    </TouchableOpacity>:<Image
                        ref={(ref)=>this.imageView=ref}
                        source={{uri: src}}
                        style={{width: screenWidth,height: (this.state.height/this.state.width)*screenWidth}}
                    />}
                </View>
    		);
        }
    }
};

let screenWidth = Dimensions.get('window').width - 20;
let tagHeigth = Math.ceil(45 * Dimensions.get('window').width / 750);
let tagWidth = Math.ceil(65 * Dimensions.get('window').width / 750);

let imageView = null;
let styles = StyleSheet.create({
    tagView: {
        height : tagHeigth,
        backgroundColor: 'rgba(0, 0, 0, 0.6)',
        borderTopLeftRadius: 15,
        borderBottomLeftRadius: 15,
        borderTopRightRadius: 15,
        borderBottomRightRadius: 15,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
    },
    button: {
        height : tagHeigth,
        width : tagWidth + 5,
        backgroundColor: 'rgba(0, 0, 0, 0.6)',
        borderTopRightRadius: 15,
        borderBottomRightRadius: 15,
        flexDirection: 'row',
    },
    image: {
        width : tagWidth - 7,
        height : tagHeigth,
        marginLeft: 8,
        backgroundColor: 'transparent',
    },
    icon: {
        width : tagHeigth - 5,
        height : tagHeigth - 5,
        marginRight: 10,
        backgroundColor: 'transparent',
    },
    rightDetail: {
        maxWidth: Math.ceil(screenWidth * (2/3)) - 2*tagHeigth,
        height : tagHeigth,
        color: 'white',
        paddingLeft: 10,
        paddingRight: 10,
        paddingTop: Platform.OS === 'ios' ? 5 : 2,
        paddingBottom: Platform.OS === 'ios' ? 5 : 2,
    },
});