'use strict';

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

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


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

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

    _onPressProductRecommend(data, rowID) {
        let {resource} = this.props;
        let moduleOrder = parseInt(resource.get('module_order')) + 1;
        let moduleType = resource.get('module_type');
        this.props.onPressProductRecommend && this.props.onPressProductRecommend(data, rowID,moduleOrder,moduleType)
    }

	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._onPressProductRecommend}
			/>
		);
	}

    render() {
		let {resource} = this.props;
        let properties = resource.get('module_data').get('properties').toJS();
        let isModuleMargin = properties.isModuleMargin;
		let list = resource?resource.get('list'):null;
		if (!list || list.size == 0) {
			return null;
		}

        let backgroundWidth =  width;
		let backgroundHeight = Math.ceil(list.size / 2) * (rowHeight+rowMarginHorizontal) + 20;
		return(
            <View style={{height: isModuleMargin=='1'?backgroundHeight+10:backgroundHeight,backgroundColor: '#f0f0f0'}}>
    			<View style={{width: backgroundWidth, height:backgroundHeight, backgroundColor:'white'}}>
    				<ListView
    					contentContainerStyle={styles.contentContainer}
    					initialListSize={Math.ceil(list.size)}
    					dataSource={this.dataSource.cloneWithRows(list.toArray())}
    					enableEmptySections={true}
                        renderRow={this.renderRow}
    					scrollEnabled={false}
    					scrollsToTop={false}
    				/>
    			</View>
            </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',
    },
});