'use strict';

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

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

import DeviceInfo from 'react-native-device-info';
import Immutable, {Map} from 'immutable';
import YH_Image from '../../../common/components/YH_Image';

export default class Recommend extends React.Component {

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

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

	renderRow(rowData, sectionID, rowID, highlightRow) {
        let rowContainerHeight = itemWidth;
        let {resource} = this.props;
        let list = resource.get('module_data').get('data').toArray();
        let moduleOrder = resource.get('module_order') + 1;
        let moduleType = resource.get('module_type');
        let showTitle = false;
        let bottomStyle ={};
        if (rowID < list.length - 4) {
            rowContainerHeight += 1;
        }else {
            bottomStyle ={borderBottomWidth: 0}
        }
        if (rowData.get('text') && rowData.get('text') != '') {
            rowContainerHeight += 20;
            showTitle = true;
        }
		return (
			<TouchableOpacity activeOpacity={1.0}  onPress={() => {
				this.props.onPressProduct && this.props.onPressProduct(rowData.get('linkType'), rowData.get('resource'),moduleOrder,moduleType,rowID+1);
			}}>
				<View style={[styles.rowContainer, bottomStyle,{height: rowContainerHeight}]}>
                    <YH_Image url={rowData.get('pic')} style={styles.thumbnail}/>

                    {showTitle?
                        <View style={styles.itemTitle}>
                            <Text style={styles.itemText} numberOfLines={1}>{rowData.get('text')}</Text>
                        </View>
                        :null
                    }
				</View>
			</TouchableOpacity>

		);
	}

    render() {
        let {resource} = this.props;
        let list = resource.get('module_data').get('data').toArray();
        let properties = resource.get('module_data').get('properties').toJS();
        let isModuleMargin = properties.isModuleMargin;
        if (!list || list.length == 0) {
            return null;
        }
        let rowHeightArray = [];
        for (var i = 0; i < Math.ceil(list.length / 4); i++) {
            rowHeightArray.push(itemWidth);
        }
        list.map((item, i) => {
            if (item.get('text') && item.get('text') != '') {
                rowHeightArray[Math.floor(i/list.length)] = itemWidth + 21;
            }
        });

        let backgroundWidth =  width;
        let backgroundHeight = 0;
        for (var i = 0; i < rowHeightArray.length; i++) {
            backgroundHeight += rowHeightArray[i];
        }
        backgroundHeight -= 1;

        if (isModuleMargin == '1') {
            backgroundHeight += 10;
        }

        return (
            <View style={{width: backgroundWidth, height:backgroundHeight, backgroundColor:'#f0f0f0'}}>
				<ListView
				    contentContainerStyle={styles.contentContainer}
				    dataSource={this.dataSource.cloneWithRows(list)}
				    renderRow={this.renderRow}
                    enableEmptySections={true}
                    pageSize={Math.ceil(list.length/4)}
                    scrollEnabled={false}
                	scrollsToTop={false}
			    />
			</View>
		);
	}
};

let {width, height} = Dimensions.get('window');
let itemWidth = (width - 3)/4;
const styles = StyleSheet.create({
	contentContainer: {
        width: width + 1,
		flexDirection: 'row',
        flexWrap: 'wrap',
        backgroundColor: 'white',
		alignItems:'flex-start',
	},
	header: {

	},
	rowContainer: {
        width: itemWidth + 1,
        height: itemWidth + 20,
        borderRightWidth: 1,
        borderBottomWidth: 1,
        borderColor: '#e5e5e5',
        backgroundColor: 'white',

	},
	thumbnail: {
        width: itemWidth,
        height: itemWidth,
        backgroundColor: '#f5f7f6',
        resizeMode: 'contain',
    },
	itemTitle: {
		height: 20,
		width: itemWidth,
    },
	itemText: {
        fontWeight: 'bold',
		textAlign: 'center',
		color: 'gray',
		fontSize: 9,
    },
	text: {
		textAlign: 'center',
		fontSize: 16,
		fontWeight: 'bold',
		color: '#444',
    },
});