'use strict';

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

import LoadMoreIndicator from '../../../common/components/LoadMoreIndicator';
import LoginTip from './LoginTip';
import InterestCell from './InterestCell';
import InterestActivityCell from './InterestActivityCell';
import Prompt from '../../../coupon/components/coupon/Prompt';
import YH_PtrRefresh from '../../../common/components/YH_PtrRefresh';


export default class Interest 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.dataSource = new ListView.DataSource({
            rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
        });
    }

    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) {
        let type = rowData.get('brand_type', '');

        if (type == 'activity') {
            return (
                <InterestActivityCell
                    data={rowData}
                    rowID={rowID}
                    onInterestLike={this.props.onInterestLike}
                    onPressBrand={this.props.onPressBrand}
                    onPressActivity={this.props.onPressActivity}
                />
            );
        }

        return (
            <InterestCell
                data={rowData}
                rowID={rowID}
                onInterestLike={this.props.onInterestLike}
                onPressBrand={this.props.onPressBrand}
                onPressProduct={this.props.onPressProduct}
            />
        );
    }

    _onEndReached() {
        let {list} = this.props.data;
        if (list.size != 0) {
            this.props.onEndReached && this.props.onEndReached();
        }
    }

    _renderFooter() {
        let {list, ptr, isFetching, endReached} = this.props.data;

        let isPullToRefresh = ptr && isFetching;
        let isLoadingMore = list.size != 0 && !ptr && isFetching;

        if (endReached) {
            return <LoadMoreIndicator
                    isVisible={true}
                    text={'暂无更多'}
                />;
        } else {
            return <LoadMoreIndicator
                    isVisible={isLoadingMore}
                    animating={isFetching}
                />;
        }
    }

    render() {

        let {list, ptr, isFetching, endReached, showLoginTip, cachedList, addLikeTip} = this.props.data;
        let dataSource = list.size == 0 ? cachedList.toArray() : list.toArray();

        let isPullToRefresh = ptr && isFetching;
        let isLoadingMore = list.size != 0 && !ptr && isFetching;

        return (
            <View style={styles.container}>
                {showLoginTip ? <LoginTip onInterestLogin={this.props.onInterestLogin} /> : null}
                {
                    Platform.OS === 'ios' ? <ListView
                        ref={(c) => {
                            this.listView = c;
                        }}
                        contentContainerStyle={styles.contentContainer}
                        dataSource={this.dataSource.cloneWithRows(dataSource)}
                        renderRow={this._renderRow}
                        enableEmptySections={true}
                        enablePullToRefresh={true}
                        isOnPullToRefresh={isPullToRefresh}
                        onRefreshData={() => {
                            this.props.onRefresh && this.props.onRefresh();
                        }}
                        yh_viewVisible={true}
                        onFinishRefreshData={() => {
                            this.listView && this.listView.yh_updateVisibleSubViews && this.listView.yh_updateVisibleSubViews();//ios 专用
                        }}//ios 专用
                        onEndReached={this._onEndReached}
                        renderFooter={this._renderFooter}
                    /> : <ListView
                        ref={(c) => {
                            this.listView = c;
                        }}
                        yh_viewVisible={true}
                        refreshControl={
                            <YH_PtrRefresh
                                    refreshing={isPullToRefresh}
                                    onRefresh={() => {
                                        this.props.onRefresh && this.props.onRefresh();
                                    }}
                                />
                        }
                        contentContainerStyle={styles.contentContainer}
                        dataSource={this.dataSource.cloneWithRows(dataSource)}
                        renderRow={this._renderRow}
                        enableEmptySections={true}
                        onEndReached={this._onEndReached}
                        renderFooter={this._renderFooter}
                    />
                }
                {addLikeTip !== '' ? <Prompt
                    text={'收藏成功'}
                    duration={800}
                    onPromptHidden={this.props.interestListTipRemove}
                /> : null}
            </View>
        );
    }
}

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

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

    },
});