'use strict';

import React from 'react';
import ReactNative from 'react-native';
import Immutable, {Map} from 'immutable';
import BrandProductListCell from '../../../common/components/ListCell/ProductListCell';
import DeleteLineText from '../../../common/components/DeleteLineText';

const {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  ListView,
  Dimensions,
  TouchableOpacity,
} = ReactNative;


export default class GoodsCell extends React.Component {
    constructor(props) {
        super(props);
		this.dataSource = new ListView.DataSource({
			rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
		});
		this.renderHeader = this.renderHeader.bind(this);
        this.renderRow = this.renderRow.bind(this);
    }

    shouldComponentUpdate(nextProps){
        if (Immutable.is(nextProps.resource, this.props.resource)) {
            return false;
        } else {
            return true;
        }
    }

	renderRow(rowData, sectionID, rowID, highlightRow) {

		let paddingLeft = rowID % 2 == 1 ? rowMarginHorizontal / 2 : rowMarginHorizontal;
		let customStyle = rowID == 0 || rowID == 1 ? {paddingLeft} : {paddingLeft};
		return (
			<BrandProductListCell
				style={[styles.listContainer, customStyle]}
				key={'row' + rowID}
				rowID={rowID}
				data={rowData}
				onPressProduct={this.props.onPressProduct}
			/>
		);
	}

	renderHeader() {
		return(
			  <View style={styles.titleB}>
                <View style={{width: width,height: 0.5,backgroundColor: '#e5e5e5',}}/>
				<View style={styles.title}>
					<Text style={styles.text}>相关推荐</Text>
				</View>
			  </View>
		);
	}

    render() {
		let {resource} = this.props;
		let list = resource.get('productList');

		if (!list || list.size == 0) {
			return null;
		}
        if (list.size == 1) {
            let backgroundWidth =  width;
    		let backgroundHeight = 40 + 80;
            let list0 = list.toJS();
            let obj = list0[0];
            let product_name = obj.product_name;
            let default_images = obj.default_images;

            let isGlobalProduct = obj.is_global && obj.is_global == 'Y'; // 是否全球购商品
            let salePrice = 0; // 售卖价
            let originPrice = 0; // 原价
            let salePriceStr = ''; // 拼接的售卖价
            let originPriceStr = ''; // 拼接的原价
            let showOriginPrice = true;  // 是否显示原价
            let salePriceColor = '#d0021b';  // 不显示原价时，售卖价颜色

            if (isGlobalProduct) {
                salePrice = parseFloat(obj.final_price);
                originPrice = parseFloat(obj.orign_price);
                salePriceStr = obj.formart_final_price;
                originPriceStr = obj.formart_orign_price;
            } else {
                salePrice = parseFloat(obj.sales_price);
                originPrice = parseFloat(obj.market_price);
                salePriceStr = '¥' + salePrice.toFixed(2);
                originPriceStr = '¥' + originPrice.toFixed(2);
            }

            if (!originPrice || (salePrice == originPrice)) {
                showOriginPrice = false;
                salePriceColor = '#444444';
            }

            return(
                <View style={{width: backgroundWidth, height:backgroundHeight, backgroundColor:'white'}}>
                    <View style={styles.titleB}>
                        <View style={{width: width,height: 0.5,backgroundColor: '#e5e5e5',}}/>
                      <View style={styles.title}>
                          <Text style={styles.text}>相关推荐</Text>
                      </View>
                    </View>
                    <View style={styles.single_View}>
                        <Image source={{uri: default_images}} style={styles.timeThumb} resizeMode={'contain'}></Image>
                        <View style={styles.nameView}>
                            <Text style={styles.name}>{product_name}</Text>

                            <View style={styles.salesView}>
                                <View style={styles.priceContainer}>
                                    <Text style={[styles.nowPrice, {color: salePriceColor}]} numberOfLines={1}>{salePriceStr}</Text>
                                    {showOriginPrice ? <DeleteLineText
                                        style={styles.oldPriceContainer}
                                        textStyle={styles.oldPrice}
                                        lineStyle={styles.deleteLine}
                                        text={originPriceStr}
                                    /> : null}
                                </View>
                                <TouchableOpacity activeOpacity={0.5} onPress={() => {
                                    this.props.onPressProduct && this.props.onPressProduct(Immutable.fromJS(obj));
                                }}>
                                    <View style={styles.button}>
                                        <Text style={styles.b}>查看详情</Text>
                                    </View>
                                </TouchableOpacity>
                            </View>
                        </View>
                    </View>
                </View>
            );
        }else {
            let backgroundWidth =  width;
    		let backgroundHeight = 40 + Math.ceil(list.size / 2) * (rowHeight+rowMarginHorizontal) + 20;
    		return(
    			<View style={{width: backgroundWidth, height:backgroundHeight, backgroundColor:'white'}}>
    				<ListView
    					contentContainerStyle={styles.contentContainer}
    					initialListSize={Math.ceil(list.size)}
    					dataSource={this.dataSource.cloneWithRows(list.toArray())}
    					renderHeader={this.renderHeader}
    					enableEmptySections={true}
                        renderRow={this.renderRow}
    					scrollEnabled={false}
    					scrollsToTop={false}
    				/>
    			</View>
    		);
        }
    }
};


let {width, height} = Dimensions.get('window');
let rowWidth = Math.ceil(137.5 * width / 320);
let rowMarginHorizontal = (width - rowWidth * 2) / 3;
const DEVICE_WIDTH_RATIO = width / 320;
let rowHeight = Math.ceil(254 * DEVICE_WIDTH_RATIO);

let styles = StyleSheet.create({
	listContainer: {
		width: width / 2,
	},
	contentContainer:{
        flexDirection: 'row',
        flexWrap: 'wrap',
    },
	titleB: {
		alignItems: 'center',
		justifyContent: 'center',
		height: 40,
		width:width,
		backgroundColor: 'white',
	},
	title: {
		alignItems: 'center',
		justifyContent: 'center',
		height: 39.5,
		width:width,
	},
    text: {
        color: 'rgb(215, 215, 215)',
    },
    single_View: {
        height: 80,
        width:width,
        backgroundColor: 'white',
        flexDirection: 'row',
    },
    nameView: {
        height: 80,
        width:width,
        backgroundColor: 'white',
    },
    name: {
        marginTop: 20,
        marginLeft:15,
        height: 20,
        width:width,
        backgroundColor: 'white',
    },
    salesView: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        height: 20,
		width:width - 80,
        backgroundColor: 'white',
    },
    button: {
        height: 20,
        width: 60,
        backgroundColor: 'white',
        alignItems: 'center',
		justifyContent: 'center',
        borderColor: 'black',
        borderWidth: 1,
        borderRadius: 2,
    },
    timeThumb: {
        marginTop: 10,
        marginLeft: 20,
        height: 50,
		width:40,
        backgroundColor: 'white',
    },
    priceContainer: {
        marginLeft: 15,
        flexDirection: 'row',
        marginTop: 1,
        alignItems: 'center',
		justifyContent: 'center',
    },
    nowPrice: {
        fontSize: 12,
        color: '#d0021b',
    },
    oldPriceContainer: {
        flexDirection: 'row',
        marginLeft: 5,
    },
    oldPrice: {
        fontSize: 12,
        color: '#b0b0b0',
        height: 16,
    },
    deleteLine: {
        position: 'absolute',
        top: (16 / 2) - 0.8,
        left: 0,
        right: 0,
        height: 1,
        backgroundColor: '#b0b0b0',
    },
});