'use strict';

import React, {Component} from 'react';
import Immutable, {Map} from 'immutable';
import LoadMoreIndicator from '../../../common/components/LoadMoreIndicator';
import YohoCoinNumHeader from './YohoCoinNumHeader';
import YohoCoinBanner from './YohoCoinBanner';
import BrandProductListCell from '../../../common/components/ListCell/ProductListCell';
import DeviceInfo from 'react-native-device-info';
import Weixin from '../../../guang/components/detail/Weixin';
import LoadingIndicator from '../../../common/components/LoadingIndicator';

import ReactNative, {
    View,
    Text,
    Image,
    
    StyleSheet,
    Dimensions,
    TouchableOpacity,
    InteractionManager,
    Platform,
} from 'react-native';
import ListView from 'deprecated-react-native-listview'



export default class YohoCoin extends Component {

    constructor(props) {
        super(props);
        this.renderRow = this.renderRow.bind(this);
        this.renderSectionHeader = this.renderSectionHeader.bind(this);

        this.dataSource = new ListView.DataSource({
            rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
            sectionHeaderHasChanged: (s1, s2) => !Immutable.is(s1, s2),
        });
    }

    shouldComponentUpdate(nextProps){

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

    renderRow(rowData, sectionID, rowID, highlightRow) {
        if (sectionID == 'yohoCoin') {
            return (<YohoCoinNumHeader resource = {rowData} onPressYohoCoinDetail = {this.props.onPressYohoCoinDetail}/>)
        }else if (sectionID == 'banner') {
            return(<YohoCoinBanner resource = {rowData} onPressProduct={this.props.onPressBanner}/>)
        }else if (sectionID == 'weixin') {
            return(<Weixin resource={rowData} onPressWeixin={this.props.onPressWeixin}/>)
        }else if (sectionID == 'favoriteTitle') {
            let listNum = rowData;
            if (listNum == 0) {
                return null;
            }
            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.title}>
					<Text style={[styles.text, fontFamilyStyle]}>你可能喜欢</Text>
				</View>
    		);
        }else if (sectionID == 'favorite') {
            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.onPressProductCell}/>
            );
        }
        return null;
    }

    renderSectionHeader(sectionData, sectionID) {
        return null;
    }

    render() {

        let {resource} = this.props;
        let {
            yohoCoin,
            banner,
            weixin,
            favorite,
        } = resource;

        let list = favorite?favorite.get('list'):null;
        let isFetching = favorite.get('isFetching') || yohoCoin.get('isFetching') || banner.get('isFetching')|| weixin.get('isFetching');

        let dataSource = {
            yohoCoin: [yohoCoin],
            banner: [banner],
            weixin: [weixin],
            favoriteTitle: [list?list.size:0],
            favorite: list?list.toArray():[],
        }

        return (
            <View style={styles.container}>
                <ListView
                    ref='YohoCoinList'
                    contentContainerStyle={styles.contentContainer}
                    enableEmptySections={true}
                    dataSource={this.dataSource.cloneWithRowsAndSections(dataSource)}
                    renderRow={this.renderRow}
                    renderSectionHeader={this.renderSectionHeader}
                    onEndReached={() => {
                        if (list && list.size > 0) {
                            this.props.onEndReached && this.props.onEndReached();
                        }
                    }}
                />
                <LoadingIndicator
                    isVisible={isFetching}
                />
            </View>
        );
    }
}

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

let styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    contentContainer:{
        flexDirection: 'row',
        flexWrap: 'wrap',
    },
    listContainer: {
        width: width / 2,
    },
    title: {
        alignItems: 'center',
        justifyContent: 'center',
        height: 40,
        width: width,
        backgroundColor: 'white',
    },
    text: {
        textAlign: 'left',
        fontSize: 17,
        fontWeight: 'bold',
        color: 'rgba(0,0,0,0.3)',
    },
});