'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 linkType = rowData.get('linkType');
        let linkReource = rowData.get('resource');
        let title = rowData.get('title')?rowData.get('title'):'';
        let url = '';
        if (linkType == '0') {
            url = `http://m.yohobuy.com?openby:yohobuy={"action":"go.poollist","params":{"productPool":"${linkReource}","title":"${title}"}}`;
        } else if (linkType == '1') {
            url = `http://m.yohobuy.com?openby:yohobuy={"action":"go.productDetail","params":{"product_skn":"${linkReource}"}}`;
        } else if (linkType == '2') {
            url = linkReource;
        }
        let yh_exposureData = this.props.yh_exposureData?this.props.yh_exposureData:null;
        if (yh_exposureData) {
            yh_exposureData = {
                I_INDEX: 0,
                ACTION_URL: url,
                ...yh_exposureData,
            };
        }

        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 showBottomLine = resource.get('showBottomLine');
        rowContainerHeight += 1;

        if (rowData.get('text') && rowData.get('text') != '') {
            rowContainerHeight += 20;
            showTitle = true;
        }
		return (
			<TouchableOpacity yh_exposureData={yh_exposureData} activeOpacity={1.0}  onPress={() => {
				this.props.onPressProduct && this.props.onPressProduct(url,moduleOrder,moduleType,rowID+1);
			}}>
				<View style={[styles.rowContainer,{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
                    }
                    {showBottomLine?
                    <View style={{width: width,height: 1,backgroundColor: '#e5e5e5',}}/>
                    :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 + 20;
            }
        });

        let backgroundWidth =  width;
        let backgroundHeight = 0;
        for (var i = 0; i < rowHeightArray.length; i++) {
            backgroundHeight += rowHeightArray[i];
        }
        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 - 4)/4;
const styles = StyleSheet.create({
	contentContainer: {
        width: width + 1,
		flexDirection: 'row',
        flexWrap: 'wrap',
        backgroundColor: '#f5f7f6',
		alignItems:'flex-start',
	},
	header: {

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


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