'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';

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

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._updateScrollValue = this._updateScrollValue.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),
        };
    }

    componentDidMount() {

    }

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

    _renderSectionHeader(sectionData, sectionID) {
        switch (sectionID) {
			case 'posts':
				return (
                    <View style={styles.sectionHeader}>
                        <Text style={styles.sectionHeaderText}>TA的发布</Text>
                        <View style={styles.sectionHeaderLine}/>
                    </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 && this.props.onPressPost(rowData.get('id'));
                        }}
                        onPressAvatar={() => {
                            this.props.onPressAvatar && this.props.onPressAvatar(rowData.get('author').get('uid'));
                        }}
                        onPressSectionTag={() => {
                            this.props.onPressSectionTag && this.props.onPressSectionTag(rowData.get('section').toJS());
                        }}
                        onPressComment={() => {
                            this.props.onPressComment && this.props.onPressComment(rowData.get('id'));
                        }}
                        onPressLike={() => {
                            this.props.onPressLike && this.props.onPressLike(rowData);
                        }}
                    />
				);
            default:
                return null;
		}
    }

    _updateScrollValue(value) {
        this.state.scrollValue.setValue(value);
    }

    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={(e) => {
                        const offsetY = e.nativeEvent.contentOffset.y;
                        this._updateScrollValue(offsetY / 150);
                    }}
                    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) {
                            return <LoadMoreIndicator
                                    isVisible={true}
                                    text={'没有更多啦'}
                                />
                        } else {
                            return <LoadMoreIndicator
                                    isVisible={isLoadingMore}
                                    animating={isFetching}
                                />
                        }
                    }}
                />

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

            </View>
        )
    }
}

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

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