'use strict';

import React from 'react';
import ReactNative from 'react-native';
import ImmutablePropTypes from 'react-immutable-proptypes';

import MsgCenterCatgoryCell from './MsgCenterCatgoryCell'
import MsgCenterNormalCell from './MsgCenterNormalCell'

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

export default class MessageCenter extends React.Component {
    static propTypes = {
        system: ImmutablePropTypes.contains({
                content:React.PropTypes.string,
                timeago:React.PropTypes.string,
        }),

        like: ImmutablePropTypes.contains({
                content:React.PropTypes.string,
                timeago:React.PropTypes.string,
        }),

        message: ImmutablePropTypes.listOf(
            ImmutablePropTypes.contains({
                author: ImmutablePropTypes.contains({
                    avatar: React.PropTypes.string,
                    uid: React.PropTypes.number,
                    name: React.PropTypes.string,
    			}),
                timeago:React.PropTypes.string,
                title:React.PropTypes.string,
                reply:React.PropTypes.string,
                section: ImmutablePropTypes.contains({
    				id: React.PropTypes.number,
    				name: React.PropTypes.string,
    			}),
            }),
        ),
    }

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

    _renderSeparator() {
        return (
            <View style={styles.separator}/>
        );
    }

    _renderRow(rowData, sectionID, rowID, highlightRow) {
        switch (sectionID) {
            case 'system':
            case 'like':
            return (
                <MsgCenterCatgoryCell/>
            );

            break;

            break;

            case 'message':
            return (
                <MsgCenterCatgoryCell/>
            );

            break;
            default:

        }
    }

    render() {

        let {system, like, message,} = this.props;
        let dataSource = {
            system: this.props.system.toArray(),
            like: this.props.like.toArray(),
            message: this.props.message.toArray(),
        };

        return (
            <View style={styles.container}>
                <ListView
                    dataSource={this.dataSource.cloneWithRowsAndSections(dataSource)}
                    renderRow={this._renderRow}
                    renderSeparator={this._renderSeparator}
                />

            </View>
        );
    }
}



let {width, height} = Dimensions.get('window');
let navbarHeight = (Platform.OS === 'android') ? 50 : 64;
let styles = StyleSheet.create({
    container: {
        top: navbarHeight,
        height: height-navbarHeight,
        backgroundColor: 'white',
    },

});