'use strict';

import React from 'react';
import ReactNative from 'react-native';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ListCell from '../home/ListCell';
import Immutable, {Map} from 'immutable';

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

let {width, height} = Dimensions.get('window');
let bannerHeight = Math.ceil((363 / 750) * width);

export default class SectionList extends React.Component {

    static propTypes = {
        data: 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,
            }),
        ),
    };

    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),
        });
    }

    _renderRow(rowData, sectionID, rowID, highlightRow) {
        return (
            <ListCell
                key={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);
                }}
            />
        );
    }

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

	render() {
        let data = this.props.data.toArray();
        return (
            <ListView
                dataSource={this.dataSource.cloneWithRows(data)}
                renderRow={this._renderRow}
                renderSeparator={this._renderSeparator}
                enableEmptySections={true}
                scrollEnabled={false}
                onEndReached={() => {

                }}
            />
        );

    }
}

let styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    separator: {
        height: 0.5,
        backgroundColor: '#e0e0e0',
    },

});