'use strict';

import React from 'react';
import ReactNative from 'react-native';
import Immutable, {Map} from 'immutable';
import GuangDetailProductCell from './GuangDetailProductCell';

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


export default class GoodsCell extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            moreProduct: true,
        };

        this.dataSource = new ListView.DataSource({
			rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
		});
        this.renderRow = this.renderRow.bind(this);
        this._renderCellType1 = this._renderCellType1.bind(this);
        this._renderCellType2 = this._renderCellType2.bind(this);

    }

    shouldComponentUpdate(nextProps,nextState){
        if (Immutable.is(nextProps.resource, this.props.resource) &&  nextState.moreProduct == this.state.moreProduct) {
            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 (
            <View style={[styles.listContainer, customStyle]}>
    			<GuangDetailProductCell
    				style={styles.listContainer}
    				key={'row' + rowID}
    				rowID={rowID}
    				data={rowData}
    				onPressProduct={this.props.onPressProduct}
                    onPressShopCar={this.props.onPressShopCar}
    			/>
            </View>
		);
    }

    //两列多行的样式
    _renderCellType2(list) {
        let backgroundWidth =  width;
        let backgroundHeight = Math.ceil(list.size / 2) * (cellHeight+rowMarginHorizontal);
        return(
            <View style={{width: backgroundWidth, height:backgroundHeight, backgroundColor:'white',marginTop: 10,}}>
                <ListView
                    yh_viewVisible = {true}//自动曝光开关
                    contentContainerStyle={styles.contentContainer}
                    initialListSize={Math.ceil(list.size)}
                    dataSource={this.dataSource.cloneWithRows(list.toArray())}
                    enableEmptySections={true}
                    renderRow={this.renderRow}
                    scrollEnabled={false}
                    scrollsToTop={false}
                />
            </View>
        );
    }

    //单列多行的样式
    _renderCellType1(list) {

        let backgroundWidth =  width;
		let backgroundHeight = Math.ceil(list.size) * (rowHeight+1);

        return(
			<View style={{width: backgroundWidth, height:backgroundHeight, backgroundColor:'white',marginTop: 15}}>
                {list.map((value, i) => {
                    let product = value?value.toJS():null;
                    if (!product) {
                        return null;
                    }
                    let default_images = product.default_images;
                    let product_name = product.product_name;
                    let originPrice = parseFloat(product.sales_price);
                    let originPriceStr = '¥ ' + originPrice.toFixed(2); // 拼接的原价
                    let product_skn = product.product_skn;
                    let prd_id = product.product_id;
                    let isGlobal = product.is_global=='Y'?true:false;
                    let is_limitbuy = product.is_limitbuy=='Y'?true:false;

                    return (
                        <TouchableOpacity
                            key={product_skn + '_key_' + i}
                            style={styles.content_View}
                            activeOpacity={0.5}
                            onPress={() => {
                                let pos_id = 103;
                                this.props.onPressProduct && this.props.onPressProduct(value,i,pos_id);
                            }}
                        >
                            <View style={styles.content_View}>
                                <View style={styles.single_View}>
                                    <Image source={{uri: default_images}} style={styles.icon} resizeMode={'contain'}></Image>
                                    <View style={styles.nameView}>
                                        <Text style={styles.name} numberOfLines={2}>{product_name}</Text>
                                        <Text style={styles.nowPrice} numberOfLines={1}>{originPriceStr}</Text>
                                    </View>
                                    {
                                        is_limitbuy ?
                                            <TouchableOpacity style={styles.type1LookDetail} activeOpacity={0.5} onPress={() => {
                                                let pos_id = 103;
                                                this.props.onPressProduct && this.props.onPressProduct(value,i,pos_id);
                                            }}>
                                                <Text style={styles.lookDetailText}>查看详情</Text>
                                                <Image source={require('../../../studentCertification/images/right_arrow.png')} style={styles.arrow_icon} resizeMode={'contain'}></Image>
                                            </TouchableOpacity>
                                         : <TouchableOpacity
                                            style={styles.touchableOpacityButton}
                                            activeOpacity={0.5}
                                            onPress={() => {
                                                let pos_id = 106;
                                                this.props.onPressShopCar && this.props.onPressShopCar(product.product_skn,prd_id,pos_id,isGlobal);
                                            }}
                                        >
                                            <Image source={require('../../image/jrgwc.png')} style={styles.button} resizeMode={'contain'}></Image>
                                        </TouchableOpacity>
                                    }

                                </View>
                            </View>
                        </TouchableOpacity>
                    );
                })}
			</View>
		);
    }

    render() {
		let {resource, articleId} = this.props;
		let originList = resource.get('productList');
        let display_template = resource.get('display_template')?resource.get('display_template'):1;
        let listSize = originList?originList.size:0;
		if (!originList || listSize == 0) {
			return (<View style={{height:1,width:width,backgroundColor:'white'}}/>);
		}
        let prudoctLimitRow = 4;
        let list = originList;
        if (this.state.moreProduct && listSize > prudoctLimitRow) {
            list = originList.slice(0,prudoctLimitRow);
        }
        let surplusSize = listSize-prudoctLimitRow;
        let moreStr = '展开剩余'+ surplusSize + '个商品';
        let backgroundWidth =  width;

        let moreProductHeigth = Platform.OS === 'ios' ? 22 : 24
        let showMoreViewHeigth = (this.state.moreProduct && listSize > prudoctLimitRow)?moreProductHeigth+20:0;
		let backgroundHeight = Math.ceil(list.size) * (rowHeight+1) + showMoreViewHeigth + 15 + 9;//15: 上间距 10+cell本身的5 ：下边距

        if (display_template == 2) {
            backgroundHeight =  Math.ceil(originList.size / 2) * (cellHeight+rowMarginHorizontal) + 15;
        }

		return(
			<View style={{width: backgroundWidth, height:backgroundHeight, backgroundColor:'white'}}>
                {display_template == 1 ? this._renderCellType1(list) : this._renderCellType2(originList)}
                {(display_template == 1 && this.state.moreProduct && listSize > 2) ?
                    <TouchableOpacity style={styles.moreContainer} activeOpacity={0.5} onPress={() => {
                        let params = {ID: articleId + ''};
                        NativeModules.YH_CommonHelper.logEvent('YB_STROLL_DETAIL_MORE_GODS_C', params);
                        this.setState({moreProduct: !this.state.moreProduct});
                    }}>
                        <View style={styles.more}>
                            <Text style={styles.moreText} numberOfLines={1}>{moreStr}</Text>
                            <View style={styles.arrowView}>
                                <Image source={require('../../image/up-arrow.png')} style={styles.arrow_icon} resizeMode={'contain'}></Image>
                            </View>
                        </View>
                    </TouchableOpacity>:null}
			</View>
		);
    }
};

let {width, height} = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 750;
let rowsp = 6;
let rowHeight = Math.ceil(204 * DEVICE_WIDTH_RATIO) + rowsp;
let imageWidth =  Math.ceil((rowHeight - rowsp) * (152/204));
let rowWidth = Math.ceil(137.5 * width / 320);
let rowMarginHorizontal = (width - rowWidth * 2) / 3;
let cellHeight = Math.ceil(582 * DEVICE_WIDTH_RATIO);
cellHeight = Platform.OS === 'ios' ? cellHeight : cellHeight + 4;

let styles = StyleSheet.create({
    content_View: {
        height: rowHeight + 1,
        width:width,
        backgroundColor: 'white',
    },
    contentContainer:{
        flexDirection: 'row',
        flexWrap: 'wrap',
    },
    listContainer: {
		width: width / 2,
	},
    single_View: {
        height: rowHeight - rowsp + 1,
        width: Platform.OS === 'ios' ? width-19 : width-18.5,
        flexDirection: 'row',
        marginLeft: 10,
        borderColor: '#e0e0e0',
        borderWidth: 0.5,
    },
    icon: {
        height: rowHeight - rowsp,
		width: imageWidth,
        backgroundColor: '#f0f0f0',
    },
    nameView: {
        height: rowHeight - rowsp,
        width: width - imageWidth - 20,
        backgroundColor: '#f0f0f0',
    },
    name: {
        marginTop: 13,
        marginLeft:15,
        fontSize: 14,
        color: '#444444',
        fontWeight:'bold',
        width: width - imageWidth - 30 - 35,
    },
    nowPrice: {
        fontSize: 14,
        marginTop: 13,
        marginLeft:15,
        fontWeight:'bold',
        color: '#d0021b',
    },
    touchableOpacityButton: {
        height: 23,
        width: 40,
        right: 15,
        bottom: 10,
        position: 'absolute',
    },
    button: {
        height: 23,
        width: 40,
    },
    moreContainer: {
        height: Platform.OS === 'ios' ? 22 : 24,
		width:width,
        alignItems: 'center',
        justifyContent: 'center',
        flexDirection: 'row',
        marginTop: 9,
    },
    more: {
        height: Platform.OS === 'ios' ? 22 : 24,
        width:width,
        alignItems: 'center',
        justifyContent: 'center',
        flexDirection: 'row',
    },
    moreText: {
        height: Platform.OS === 'ios' ? 22 : 24,
        paddingLeft: 10,
        paddingRight: 1,
        paddingTop: 2,
        paddingBottom: 2,
        fontSize: 15,
        color: 'white',
        backgroundColor: '#b0b0b0',
    },
    arrowView: {
        width: 25,
        height: Platform.OS === 'ios' ? 22 : 24,
        justifyContent: 'center',
        backgroundColor: '#b0b0b0',
    },
    arrow_icon: {
        width: 15,
        height: 7,
    },
    type2ShopCar: {
        position: 'absolute',
        bottom: 8,
        right: 15,
        width: 40,
        height: 23,
    },
    type1LookDetail: {
        position: 'absolute',
        bottom: 10,
        right: 10,
        width: 65,
        flexDirection: 'row',
        alignItems:"center",
    },
    lookDetailText: {
        width: 50,
        //height: 12,
        fontSize: 12,
        color: '#444444',
        textAlign: 'right',
        fontWeight:'bold',
        backgroundColor: '#f0f0f0',
    }
});