'use strict';

import React from 'react';
import ReactNative from 'react-native';
import {getSlicedUrl} from '../../../classify/utils/Utils';
import Immutable, {Map} from 'immutable';
import DeviceInfo from 'react-native-device-info';

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

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

    shouldComponentUpdate(nextProps){

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

	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 res = data.toJS();
		let big_imageData = res.big_image;
		let newSrc = getSlicedUrl(big_imageData[0].src, 320, 200, 2);
        let url = big_imageData[0].url;
        let title = res.title;
		return(
			<View style={styles.titleView}>
				<View style={{width: width,height: 0.5,backgroundColor: '#e5e5e5',}}/>
				<View style={styles.title}>
					<Text style={[styles.text, fontFamilyStyle]}>{title.title}</Text>
				</View>
                <TouchableOpacity activeOpacity={0.5} onPress={() => {
    				this.props.onPressBrandItem && this.props.onPressBrandItem(url);
    			}}>
    				<Image
    					source={{uri: newSrc}}
    					style={styles.largeImage}
    					resizeMode={'contain'}
    				/>
                </TouchableOpacity>
				<View style={{width: width,height: 0.5,backgroundColor: '#e5e5e5',}}/>
			</View>
		);
	}

    renderRow(rowData,sectionID,rowID,highlightRow) {

        let newSrc = getSlicedUrl(rowData.src, 100, 100, 2);
        return (
            <TouchableOpacity activeOpacity={0.5} onPress={() => {
				this.props.onPressBrandItem && this.props.onPressBrandItem(rowData.url);
			}}>
                <View style={styles.row}>
                    <View style={styles.thumbnailV}>
                          <Image
                            source={{uri: newSrc}}
                            style={styles.thumbnail}
                            // resizeMode={'contain'}
                          />
                    </View>
                </View>
            </TouchableOpacity>
        );
    }

    render() {
		let {resource} = this.props;
        let data = resource.get('data');
        let res = data.toJS();
		let big_imageData = res.big_image;
        let title = res.title;
		let list = res.list;

        if (resource && list.length == 0) {
			return null;
		}

		let backgroundWidth =  width;
		let backgroundHeight =  largeImageH + Math.ceil(list.length / 3) * itemWidth + 40;
		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}
					scrollEnabled={false}
					scrollsToTop={false}
				/>
			</View>
		);
    }
};


let {width, height} = Dimensions.get('window');
let itemWidth= width/3;
let itemHeight = itemWidth;
let largeImageW = width;
let largeImageH = Math.ceil((200/320)*width);

let styles = StyleSheet.create({
	contentContainer: {
		flexDirection: 'row',
        flexWrap: 'wrap',
		alignItems:'flex-start',
	},
    row: {
        width: itemWidth,
        height: itemWidth,
        backgroundColor: '#e5e5e5',
     },
    thumbnailV: {
		width: itemWidth,
		height: itemHeight,
	},
    thumbnail: {
		width: itemWidth-0.5,
		height: itemHeight-0.5,
        backgroundColor: 'white',
		borderRightWidth: 0.5,
        borderBottomWidth: 0.5,
        borderColor: '#e5e5e5',
	},
	titleView: {
		height: largeImageH+40,
		width:width,
        backgroundColor: 'white',
    },
	title: {
		alignItems: 'center',
		justifyContent: 'center',
		height: 39,
		width:width,
        backgroundColor: 'white',
    },
	text: {
		textAlign: 'center',
		fontSize: 16,
		fontWeight: 'bold',
		color: '#444',
    },
	largeImage: {
		width: largeImageW,
		height: largeImageH,
		backgroundColor: 'white',
	},
});