'use strict';

import React from 'react';
import ReactNative from 'react-native';
import ReplyCell from './ReplyCell';
import EmptyListTip from './EmptyListTip';

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

export default class ReplyList extends React.Component {
    constructor(props) {
        super(props);
        this._renderRow = this._renderRow.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 = {
            contentHeight: 0,
        };
    }

    shouldComponentUpdate(nextProps) {
        return this.props.data !== nextProps.data
            || this.props.endReached !== nextProps.endReached
            || this.props.endReachedViewHeight !== nextProps.endReachedViewHeight;
    }

    _renderRow(rowData, sectionID, rowID, highlightRow) {
        return (
            <ReplyCell
                key={sectionID + rowID}
                data={rowData}
                onPressAvatar={() => {
                    // this.props.onPressAvatar && this.props.onPressAvatar();
                }}

                onPressReply={() => {
                    // this.props.onPressReply && this.props.onPressReply;
                }}
                onPressPost={this.props.onPressPost}
            />
        );
    }

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

    render() {
        let {data, endReached, endReachedViewHeight} = this.props;
        if (endReached && data.size == 0) {
            let endReachedText = '你还没有回复过的帖子';
            return (
                <EmptyListTip
                    style={{height: endReachedViewHeight}}
                    text={endReachedText}
                    onLayout={(event) => {
                        this.setState({
                            contentHeight: this.props.endReachedViewHeight
                        });
                    }}
                />
            );
        }

        return (
            <ListView
                dataSource={this.dataSource.cloneWithRows(data.toArray())}
                renderRow={this._renderRow}
                renderSectionHeader={this._renderSectionHeader}
                renderSeparator={this._renderSeparator}
                enableEmptySections={true}
                scrollEnabled={false}
                onEndReached={() => {}}
                onContentSizeChange={(width, height) => {
                    this.setState({
                        contentHeight: height
                    }, () => {
                        this.props.onContentSizeChange && this.props.onContentSizeChange(width, height);
                    });
                }}
            />
        );
    }
}


let styles = StyleSheet.create({
    separator: {
        height: 0.5,
        backgroundColor: '#e0e0e0',
    },
});