'use strict';

import React from 'react';
import ReactNative from 'react-native';

import Immutable, {List} from 'immutable';
import moment from 'moment';
import ImmutablePropTypes from 'react-immutable-proptypes';
import LoadingIndicator from './indicator/LoadingIndicator';

const {
    Component,
} = React;

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

export default class Meassage extends Component {

    static propTypes = {
        items: ImmutablePropTypes.listOf(
            ImmutablePropTypes.contains({
                type:React.PropTypes.string,
                title: React.PropTypes.string,
                createTime: React.PropTypes.number,
                id: React.PropTypes.number,
                content: React.PropTypes.string,
            })
        ),
        onPressItem: React.PropTypes.func,
    };

    constructor(props) {
        super(props);
        this.renderItem = this.renderItem.bind(this);
        this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => !Immutable.is(r1, r2)});
    }

    renderName(item) {
        if (item.get('type') !== '1') {
            return (
                <Text style={{color: '#B0B0B0', fontSize: 12, marginLeft: 15, marginTop: 6,}}>尊敬的用户:</Text>
            );
        } else {
            return null;
        }
    }

    renderItem(item, sectionID, rowID) {

        let date = moment(item.get('createTime')).format('YYYY-M-D');
        return (
            <TouchableOpacity activeOpacity={0.5} onPress={() => this.props.onPressItem(rowID)}>
                <View style={styles.row}>
                    <View style={styles.row_top}>
                        <Text style={styles.title}>{item.get('title')}</Text>
                        <Text style={styles.time}>{date}</Text>
                    </View>
                    <View style={styles.line}/>
                    {this.renderName(item)}
                    <Text style={styles.subtitle} numberOfLines={1}>{item.get('content')}</Text>
                    <Text style={styles.text_detail}>查看详情</Text>
                </View>
            </TouchableOpacity>
        );
    }

	render() {
        return (
            <View style={styles.listContainer}>
                <ListView style={styles.list}
                    dataSource={this.ds.cloneWithRows(this.props.items.toArray())}
                    renderRow={this.renderItem}
                    enableEmptySections={true}
                    renderSeparator={(sectionID, rowID) => <View key={`${sectionID}-${rowID}`} style={styles.separator}/>}
                />
                <LoadingIndicator
                    isVisible={this.props.isFetching}
                />
            </View>
        );

    }

    nextPage(){

    }
}

let {height, width} = Dimensions.get('window');
const styles = StyleSheet.create({

    listContainer:{
        flex: 1,
        alignItems: 'center',
    },

    list:{
        flex: 1,
    },

    row: {
        flexDirection: 'column',
        width: width,
        backgroundColor: 'white',
    },
    row_top: {
        flexDirection: 'row',
        height: 40,
        width: width,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'white',
    },
    title: {
        flex: 1,
        color: '#444444',
        fontSize: 15,
        marginLeft: 15,
    },
    time: {
        color: '#B0B0B0',
        fontSize: 9,
        marginRight: 15,
    },
    subtitle: {
        fontSize: 12,
        marginTop: 6,
        marginLeft: 15,
        color: '#B0B0B0',
    },
    text_detail: {
        fontSize: 12,
        alignSelf: 'flex-end',
        marginTop: 8,
        marginRight: 15,
        marginBottom: 15,
        color: '#B0B0B0',

    },
    listView: {
        marginTop: 120,

    },
    line: {
        height: 1,
        backgroundColor: '#B0B0B0',
        marginLeft:15,
        marginBottom:8,
     },
    separator: {
        height: 8,
    },
});