'use strict';

import React from 'react';
import ReactNative from 'react-native';
import ScrollableTabView from 'react-native-scrollable-tab-view';
import ImmutablePropTypes from 'react-immutable-proptypes';

import UserCenterTop from '../user/UserCenterTop';
import ListCell from '../home/ListCell';
import LoadMoreIndicator from '../../../common/components/LoadMoreIndicator';
import UserNavBar from '../user/UserNavBar';
import EmptyListTip from '../user/EmptyListTip';

const {
    View,
    Text,
    ListView,
    Platform,
    Dimensions,
    StyleSheet,
    Animated,
} = ReactNative;


let {width, height} = Dimensions.get('window');
let navbarHeight = (Platform.OS === 'android') ? 50 : 64;
let userBgHieght = Math.ceil((490 / 750) * width);
let sectionBarHeight = 46;

export default class UserThatNotMe extends React.Component {

    static propTypes = {
        user: ImmutablePropTypes.contains({
            avatar: React.PropTypes.string,
            backgroundImage: React.PropTypes.string,
            nickName: React.PropTypes.string.isRequired,
            sign: React.PropTypes.string,
        }),
        posts: ImmutablePropTypes.listOf(
            ImmutablePropTypes.contains({
                author: ImmutablePropTypes.contains({
                    avatar: React.PropTypes.string,
                    uid: React.PropTypes.number,
                    name: React.PropTypes.string,
                }),
                timeago: React.PropTypes.string.isRequired,
                isOwner: React.PropTypes.bool,
                isTop: React.PropTypes.bool,
                isLike: React.PropTypes.bool,
                id: React.PropTypes.number,
                title: React.PropTypes.string,
                desc: React.PropTypes.string,
                thumbs: ImmutablePropTypes.listOf(
                    ImmutablePropTypes.contains({
                        src: React.PropTypes.string,
                    })
                ),
                section: ImmutablePropTypes.contains({
                    id: React.PropTypes.number,
                    name: React.PropTypes.string,
                }),
                commentCount: React.PropTypes.number,
                likeCount: React.PropTypes.number,
            }),
        ),
        onPressPost: React.PropTypes.func,
        onPressAvatar: React.PropTypes.func,
        onPressSectionTag: React.PropTypes.func,
        onPressComment: React.PropTypes.func,
        onPressLike: React.PropTypes.func,
        onEndReached: React.PropTypes.func,
    };


    constructor(props) {
        super (props);

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

        this.state = {
            scrollValue: new Animated.Value(0),
        };

        this.initialPageHeight = height - userBgHieght;
    }

    componentDidMount() {

    }

    _renderHeader() {
        return (
            <UserCenterTop
                userInfo={this.props.user}
            />
        );
    }

    _renderSectionHeader(sectionData, sectionID) {
        switch (sectionID) {
			case 'posts':
                if (this.props.posts.size == 0) {
                    return null;
                }

				return (
                    <View style={styles.sectionHeader}>
                        <Text style={styles.sectionHeaderText}>TA的发布</Text>
                        <View style={styles.sectionHeaderTopLine}/>
                        <View style={styles.sectionHeaderBottomLine}/>
                    </View>
				);

            default:
                return null;
		}
    }

    _renderSeparator(sectionID, rowID, adjacentRowHighlighted) {
        return (
            <View key={'separator' + sectionID + rowID} style={styles.separator}/>
        );
    }

    _renderRow(rowData, sectionID, rowID, highlightRow) {
        switch (sectionID) {
			case 'posts':
				return (
                    <ListCell
                        key={sectionID + rowID}
                        data={rowData}
                        onPressPost={this.props.onPressPost}
                        onPressAvatar={this.props.onPressAvatar}
                        onPressSectionTag={this.props.onPressSectionTag}
                        onPressComment={this.props.onPressComment}
                        onPressLike={this.props.onPressLike}
                    />
				);
            default:
                return null;
		}
    }

    render() {
        let {posts, endReached, isRefreshing, isLoadingMore, isFetching} = this.props;
        let dataSource = {
            posts: posts.toArray(),
        }

        return (
            <View style={styles.container}>
                <ListView
                    ref={(c) => {
                        this.listView = c;
                    }}
                    onScroll={Animated.event([{
                        nativeEvent: {
                            contentOffset: {
                                y: this.state.scrollValue
                            }
                        }
                    }])}
                    dataSource={this.dataSource.cloneWithRowsAndSections(dataSource)}
                    renderHeader={this._renderHeader}
                    renderRow={this._renderRow}
                    renderSectionHeader={this._renderSectionHeader}
                    renderSeparator={this._renderSeparator}
                    enableEmptySections={true}
                    enablePullToRefresh={false}
                    onEndReached={() => {
                        this.props.onEndReached && this.props.onEndReached();
                    }}
                    renderFooter={()=>{
                        if (endReached) {
                            if (posts.size == 0) {
                                return <EmptyListTip
                                    style={{height: this.initialPageHeight}}
                                    text={'TA还没有发布过帖子'}
                                />
                            } else {
                                return <LoadMoreIndicator
                                    isVisible={true}
                                    text={'暂无更多'}
                                />
                            }
                        } else {
                            return <LoadMoreIndicator
                                isVisible={isLoadingMore}
                                animating={isFetching}
                            />
                        }
                    }}
                />

                <UserNavBar
                    scrollValue={this.state.scrollValue}
                    channel={this.props.channel}
                    onBack={this.props.onBack}
                />

            </View>
        )
    }
}


let styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    sectionHeader: {
        flexDirection: 'row',
        height: sectionBarHeight,
        alignItems: 'center',
        backgroundColor: 'white',
    },
    sectionHeaderText: {
        fontSize: 18,
        marginLeft: 17,
        fontFamily: 'Helvetica Light',
    },
    sectionHeaderTopLine: {
        position: 'absolute',
        left: 0,
        top: 0,
        width: width,
        height: 0.5,
        backgroundColor: '#e0e0e0',
    },
    sectionHeaderBottomLine: {
        position: 'absolute',
        left: 17,
        bottom: 0,
        width: width - 17,
        height: 0.5,
        backgroundColor: '#e0e0e0',
    },
    separator: {
        height: 0.5,
        backgroundColor: '#e0e0e0',
    },
});