'use strict';

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

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

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

export default class newArrive extends React.Component {

    constructor(props) {
        super (props);

        this.renderRow = this.renderRow.bind(this);
        this.renderHeader = this.renderHeader.bind(this);
        this.renderFooter = this.renderFooter.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 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() {
		let fontFamilyStyle = {};
 		if (Platform.OS === 'ios') {
 			let systemVersion = DeviceInfo.getSystemVersion();
 			systemVersion = parseFloat(systemVersion);
 			if (systemVersion >= 9.0) {
 				fontFamilyStyle = {fontFamily: 'PingFang SC'};
 			}
 		}

	  	return(
			<View style={styles.container}>
                <View style={{
                    width: width,
                    height: 0.5,
                    backgroundColor: '#e5e5e5',
                }}/>
				<View style={styles.title}>
					<Text style={styles.text}>NEW ARRIVAL</Text>

                    <TouchableOpacity activeOpacity={0.5} style={styles.thumbnail} onPress={() => {
                        this.props.onPressMoreProducts && this.props.onPressMoreProducts(this.props.moreProductUrl);
                    }}>
                      	<Image
                            source={require('../../images/btn_more_p.png')}
                            style={{width: 22, height: 4,backgroundColor:'white',marginTop:10}}
                            resizeMode={'contain'}
                        />
                    </TouchableOpacity>
				</View>
			</View>
		);
	}

    renderFooter() {
        return (
            <View>
            <View style={{
                width: width,
                height: 30,
                backgroundColor: 'white',
            }}/>
                <View style={{
                    width: width,
                    height: 0.5,
                    backgroundColor: '#e5e5e5',
                }}/>

                <TouchableOpacity activeOpacity={0.5} onPress={() => {
                    this.props.onPressMoreProducts && this.props.onPressMoreProducts(this.props.moreProductUrl);
                }}>
                    <View style={styles.footerContainer}>
                        <Text style={styles.footerText}>
                            更多商品
                        </Text>
                        <Image
                            source={require('../../images/more_arrow.png')}
                            style={styles.footerArrow}
                            resizeMode={'contain'}
                        />
                    </View>
                </TouchableOpacity>

                    <View style={{
                        width: width,
                        height: 0.5,
                        backgroundColor: '#e5e5e5',
                    }}/>
                    <View style={{
                        width: width,
                        height: 15,
                        backgroundColor: '#f0f0f0',
                    }}/>
            </View>

		);

    }

    render() {
		let prodcutList = this.props.prodcutList;
		if (!prodcutList || prodcutList.length == 0) {
			return null;
		}

        let backgroundWidth =  width;
		let backgroundHeight = 64 + 20 + Math.ceil(prodcutList.length / 2) * (rowHeight + rowMarginHorizontal) + 44;

        return (
			<View style={{
				width: backgroundWidth,
				height: backgroundHeight,
				backgroundColor: 'white',
        	}}>
				<ListView
				    contentContainerStyle={styles.grid}
				    dataSource={this.dataSource.cloneWithRows(prodcutList)}
				    renderRow={this.renderRow}
					renderHeader={this.renderHeader}
                    renderFooter={this.renderFooter}
                    enableEmptySections = {true}
			    />
			</View>
		);
	}
};

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

const styles = StyleSheet.create({
	grid: {
		flex: 1,
		flexDirection: 'row',
		flexWrap: 'wrap',
		alignItems: 'flex-start',
	},
	title: {
		alignItems: 'center',
		justifyContent: 'center',
		height: 40,
		width: width,
		backgroundColor: 'white',
    },
	text: {
		textAlign: 'left',
		fontSize: 16,
		fontWeight: 'bold',
		color: '#000000',
        marginTop: 16,
    },
	listContainer: {
        width: width / 2,
    },
    thumbnail: {
        position: 'absolute',
        width: 40,
        height: 38,
        top: 1,
        bottom: 1,
        left: width - 40,
        backgroundColor: 'transparent',
        justifyContent: 'center',
    },
    footerContainer: {
        width: width,
        height: 44,
        flexDirection: 'row',
        backgroundColor: 'white',
        justifyContent: 'space-between',
    },
    footerText: {
        fontSize: 14,
        marginTop: 16,
        marginLeft: 15,
    },
    footerArrow: {
        width: 9,
        height: 15,
        backgroundColor:'white',
        marginTop: 16,
        marginRight: 15,
    },
});