'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 {getSlicedUrl} from '../../../classify/utils/Utils';

export default class RecommendContentFive extends React.Component {

    constructor(props) {
        super (props);

        this.renderHeader = this.renderHeader.bind(this);
        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 newSrc = getSlicedUrl(rowData.get('src'), 80, 80, 2);

		return (
			<TouchableOpacity activeOpacity={0.5}  onPress={() => {
				this.props.onPressRecommendItem && this.props.onPressRecommendItem(rowData.get('url'));
			}}>
				<View style={styles.rowContainer}>
					<Image
					 	source={{uri: newSrc}}
	 			 		style={styles.thumbnail}
	 			 	>
					</Image>
				</View>
			</TouchableOpacity>

		);
	}

	renderHeader() {
		let fontFamilyStyle = {};
 		if (Platform.OS === 'ios') {
 			let systemVersion = DeviceInfo.getSystemVersion();
 			systemVersion = parseFloat(systemVersion);
 			if (systemVersion >= 9.0) {
 				fontFamilyStyle = {fontFamily: 'PingFang SC'};
 			}
 		}

		let data = this.props.resource.get('data');
		let title = data.get('title');

	  	return(
            <View style={styles.titleB}>
                <View style={{width: width,height: 0.5,backgroundColor: '#e5e5e5',}}/>
    			<View style={styles.title}>
    				<Text style={[styles.text, fontFamilyStyle]}>{title.get('title')}</Text>
    			</View>
                <View style={{width: width,height: 0.5,backgroundColor: '#e5e5e5',}}/>
            </View>
		);
	}

    render() {
		let data = this.props.resource.get('data');

		let list = data.get('list')?data.get('list').toArray():null;
        if (!list || list.length == 0) {
            return null;
        }

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

let {width, height} = Dimensions.get('window');
let itemWidth = width / 4;

const styles = StyleSheet.create({
	contentContainer: {
		flexDirection: 'row',
        flexWrap: 'wrap',
		alignItems:'flex-start',
	},
	header: {

	},
	rowContainer: {
        borderRightWidth: 0.5,
        borderBottomWidth: 0.5,
        borderColor: '#e5e5e5',
	},
	thumbnail: {
        width: itemWidth-0.5,
        height: itemWidth-0.5,
    },
    titleB: {
		alignItems: 'center',
		justifyContent: 'center',
		height: 40,
		width:width,
        backgroundColor: 'white',
    },
	title: {
		alignItems: 'center',
		justifyContent: 'center',
		height: 39,
		width:width,
        backgroundColor: 'transparent',
    },
	text: {
		textAlign: 'center',
		fontSize: 16,
		fontWeight: 'bold',
		color: '#444',
    },
});