'use strict';

import React from 'react';
import ReactNative from 'react-native';
import Immutable, {Map} from 'immutable';

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


export default class OtherArticle extends React.Component {
    constructor(props) {
        super(props);
        this._renderRow = this._renderRow.bind(this);
        this.dataSource = new ListView.DataSource({
            rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
        });
    }

    shouldComponentUpdate(nextProps){
        if (Immutable.is(nextProps.resource, this.props.resource)) {
            return false;
        } else {
            return true;
        }
    }

    _renderRow(rowData, sectionID, rowID) {
        let {url} = rowData;
        return (
            <TouchableOpacity style={styles.cell} onPress={()=>{this.props.onPressArticle&&this.props.onPressArticle(rowData.get('url'))}}>
                <Image style={styles.cellImage} source={{uri:rowData.get('thumb')}}/>
                <View style={styles.cellContent}>
                    <Text style={styles.cellTitle} numberOfLines={2}>
                        {rowData.get('title')}
                    </Text>
                    <View style={styles.bottomContent}>
                        <Image source={require('../../image/time_icon.png')} style={styles.clockIcon}/>
                        <Text style={styles.timeText}>{rowData.get('publishTime')}</Text>
                    </View>
                </View>
            </TouchableOpacity>
        );
    }

    render() {
        let data = this.props.resource.get('data').toArray();
        
		return(
            <View style={styles.container}>
                <View style={styles.headerView}>
                    <Text style={styles.headerText}>相关文章</Text>
                </View>
                <ListView
                    style={styles.articleContainer}
                    enableEmptySections={true}
                    initialListSize={data.size}
                    dataSource={this.dataSource.cloneWithRows(data)}
                    renderRow={this._renderRow}
                    scrollEnabled={false}
                    scrollsToTop={false}
                />
            </View>
		);
		return null;
    }
};


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

let styles = StyleSheet.create({
    container: {
        backgroundColor: '#f0f0f0',
    },
    headerView: {
        backgroundColor: 'white',
        borderColor: 'rgb(215, 215, 215)',
        marginLeft: 15,
        marginRight: 15,
        marginTop: 15,
        height: 44,
        borderTopWidth: 1,
        borderLeftWidth: 1,
        borderRightWidth: 1,
    },
    headerText: {
        backgroundColor: 'white',
        fontSize: 18,
        color: 'rgb(215, 215, 215)',
        textAlign: 'center',
        paddingTop: 13,
        flex: 1,
    },
    articleContainer: {
        backgroundColor: 'white',
        borderColor: 'rgb(215, 215, 215)',
        borderTopWidth: 1,
        paddingBottom: 17,
    },
    cell: {
        backgroundColor: 'white',
        paddingBottom: 3,
        flexDirection: 'row',
    },
    cellImage: {
        width: 106,
        height: 67,
        top: 17,
        left: 17,
        backgroundColor: 'white',
    },
    cellContent: {
        left: 34,
        marginTop: 17,
        right: 17,
        flexDirection: 'column',
        backgroundColor: 'white',
        justifyContent: 'space-between',
        width: width-106-51,
    },
    cellTitle: {
        fontSize: 15,
        color: 'rgb(51, 51, 51)',
        marginTop: 2,
        marginLeft: 0,
        backgroundColor: 'white'
    },
    bottomContent: {
        left:0,
        right: 0,
        height: 16,
        backgroundColor: 'white',
        flexDirection: 'row',
    },
    clockIcon: {
        top: 3,
        width: 11,
        height: 11,
    },
    timeText: {
        backgroundColor: 'white',
        fontSize: 10,
        color: 'rgb(215, 215, 215)',
        top: 3,
        left: 3,
    }
});