'use strict';

import React, {Component} from 'react';
import Immutable, {Map} from 'immutable';
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';
import BrandProductListCell from '../../../common/components/ListCell/ProductListCell';
import LoadMoreIndicator from '../../../common/components/LoadMoreIndicator';

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} onPressSlideItem={this.props.onJumpWithUrl}/>
                );
            }else if (rowData.get('template_name') == 'recommend_content_two') {
                return (
                    <RecommendContentTwo resource={rowData} onPressBrandItem={this.props.onJumpWithUrl}/>
                );
            }else if (rowData.get('template_name') == 'recommend_content_five') {
                return (
                    <RecommendContentFive
                        resource={rowData}
                        onPressRecommendItem={this.props.onJumpWithUrl}
                    />
                );
            }else if (rowData.get('template_name') == 'recommend_content_one') {
                return (
                    <RecommendContentOne
                        resource={rowData}
                        onPressRecommendItem={this.props.onJumpWithUrl}
                    />
                );
            }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.onJumpWithUrl}
                    />
                );
            }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>
                );
            }
        }else if (sectionID == 'productList') {

            // console.log(rowData);
            if (!rowData) {
                return null;
            }
            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={Immutable.fromJS(rowData)}
                    onPressProduct={this.props.pushBrandVC}
                />
            );

        }
        return null;
    }

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

    _onEndReached() {
        this.props.onEndReached && this.props.onEndReached();
    }

    _renderFooter() {
        // endReached
        let {groupInfo} = this.props.data;
        let info = groupInfo.toJS();
        if (info.list.length > 0) {
            let {endReached,isFetching} = info.list[info.fliter];
            if (endReached) {
                return <View style={styles.placeholder} />;
            } else {
                // console.log(isFetching);
                return <LoadMoreIndicator isVisible={isFetching?true:false} animating={true} text={'正在加载更多的内容...'} />;
            }
        }
        return null;
    }

    render() {
        let {list, ptr, isFetching, endReached,groupInfo} = this.props.data;
        let isPullToRefresh = ptr && isFetching;
        let list_product = groupInfo.list.toArray();
        let fliter = groupInfo.fliter;
        let data = list_product.length > fliter ?list_product[fliter].toJS():null;
        let product = data?data.product:null;
        let productList = product?product:[];

        let dataSource = {
            topHeader: list.toArray(),
            productList: productList,
        };

        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 rowWidth = Math.ceil(137.5 * width / 320);
let rowMarginHorizontal = (width - rowWidth * 2) / 3;
let styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
    },
    contentContainer: {
        flexDirection: 'row',
        flexWrap: 'wrap',
    },
    title: {
		alignItems: 'center',
		justifyContent: 'center',
		height: 39,
		width:width,
        backgroundColor: '#f0f0f0',
    },
	text: {
		textAlign: 'center',
		fontSize: 16,
		fontWeight: 'bold',
		color: '#444',
    },
    listContainer: {
        width: width / 2,
        backgroundColor: 'white',
    },
    placeholder: {
        width,
        height: 15,
    },
});