'use strict';

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

import GlobalHomeSwiper from './GlobalHomeSwiper';
import RecommendContentTwo from './RecommendContentTwo';
import RecommendContentFive from './RecommendContentFive';
import RecommendContentOne from './RecommendContentOne';
import ProductFliter from './ProductFliter';
import SmallPic from './SmallPic';
import {getSlicedUrl} from '../../../classify/utils/Utils';

export default class Home extends Component {

    constructor(props) {
        super(props);

        this._renderRow = this._renderRow.bind(this);
        this._onEndReached = this._onEndReached.bind(this);
        this._renderFooter = this._renderFooter.bind(this);
        this.trigggePullToRefresh = this.trigggePullToRefresh.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),
        });
    }

    componentDidMount() {
        this.trigggePullToRefresh();
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.data.ptr) {
            this.listView && this.listView.scrollTo({x: 0, y: 0, animated: false, });
        }
    }

    trigggePullToRefresh() {
        if (Platform.OS === 'ios') {
            InteractionManager.runAfterInteractions(() => {
                this.listView && this.listView.getScrollResponder().startPullToRefresh();
            });
        } else {
            this.props.onRefresh && this.props.onRefresh();
        }
    }

    _renderRow(rowData: object, sectionID: number, rowID: number) {

        // console.log(rowData.toJS());


        if (sectionID == 'topHeader') {
            if (rowData.get('template_name') == 'focus') {
                return (
                    <GlobalHomeSwiper resource={rowData}/>
                );
            }else if (rowData.get('template_name') == 'recommend_content_two') {
                return (
                    <RecommendContentTwo resource={rowData}/>
                );
            }else if (rowData.get('template_name') == 'recommend_content_five') {
                return (
                    <RecommendContentFive
                        resource={rowData}
                        // onPressRecommendItem={this.props.onPressRecommendItem}
                    />
                );
            }else if (rowData.get('template_name') == 'recommend_content_one') {
                return (
                    <RecommendContentOne
                        resource={rowData}
                        // onPressRecommendItem={this.props.onPressRecommendItem}
                    />
                );
            }else if (rowData.get('template_name') == 'divideImage') {
                let data = rowData.get('data').toJS();
                let divideImage = getSlicedUrl(data[0].src, width, 20, 2);
                if (!divideImage) {return null;}
                return (
                    <Image
                        source={{uri: divideImage}}
                        style={{width: width,height: 20}}
                        resizeMode={'cover'}
                    ></Image>
                );
            }else if (rowData.get('template_name') == 'small_pic') {
                return (
                    <SmallPic
                        resource={rowData}
                        // onPressRecommendItem={this.props.onPressRecommendItem}
                    />
                );
            }else if (rowData.get('template_name') == 'paramsGroup') {
                let data = rowData.get('data');
                return (
                    <View style={styles.title}>
                        <Text style={styles.text}>{data.get('title')}</Text>
                    </View>
                );
            }
        }

        return null;
    }

    renderSectionHeader(sectionData, sectionID) {
        if (sectionID == 'productList') {
            let {groupInfo} = this.props.data;
            return (
                <ProductFliter
                    resource={groupInfo}
                    // onPressRecommendItem={this.props.onPressRecommendItem}
                />
            );
        }
        return null;
    }

    _onEndReached() {

    }

    _renderFooter() {
        return null;
    }

    render() {
        let {list, ptr, isFetching, endReached,groupInfo} = this.props.data;
        let isPullToRefresh = ptr && isFetching;
        let dataSource = {
            topHeader: list.toArray(),
            productList: groupInfo,
        };
        let isLoadingMore = list.toArray().size != 0 && !ptr && isFetching;

        return (
            <View style={styles.container}>
                <ListView
                    ref={(c) => {
                        this.listView = c;
                    }}
                    contentContainerStyle={styles.contentContainer}
                    dataSource={this.dataSource.cloneWithRowsAndSections(dataSource)}
                    renderRow={this._renderRow}
                    enableEmptySections={true}
                    renderSectionHeader={this.renderSectionHeader}
                    enablePullToRefresh={true}
                    isOnPullToRefresh={isPullToRefresh}
                    onRefreshData={() => {
                        this.props.onRefresh && this.props.onRefresh();
                    }}
                    onEndReached={this._onEndReached}
                    renderFooter={this._renderFooter}
                />
            </View>
        );
    }
}

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

let styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f0f0f0',
    },
    contentContainer: {

    },
    title: {
		alignItems: 'center',
		justifyContent: 'center',
		height: 39,
		width:width,
        backgroundColor: '#f0f0f0',
    },
	text: {
		textAlign: 'center',
		fontSize: 16,
		fontWeight: 'bold',
		color: '#444',
    },
});