/*
 * 明星原创--资讯列表
 * create by 陈林 2016.12.14
 */

'use strict';

import React, {Component} from 'react';
import ReactNative, {
    View,
    Text,
    Image,
    ListView,
    StyleSheet,
    Dimensions,
    TouchableOpacity,
} from 'react-native';

import BrandArticleCell from './BrandArticleCell';

export default class BrandArticleList extends Component {

    constructor(props) {
        super(props);

        this._renderRow = this._renderRow.bind(this);
        this._renderHeader = this._renderHeader.bind(this);

        this.dataSource = new ListView.DataSource({
            rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
        });

    }

    _renderHeader(){
        return(
                <View style={styles.headerContainer}>
                    <Text style={styles.headerText}>相关资讯</Text>
                </View>
            );
    }

    _renderRow(rowData, sectionID, rowID, highlightRow) {

                return (
                    <BrandArticleCell
                        key={'row' + rowID}
                        rowID={rowID}
                        rowData={rowData}
                        onPressArticle={this.props.onPressArticle}
                        onPressArticleLike={this.props.onPressArticleLike}
                    />
                    
                );
    }

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

    render() {
        let {articleList} = this.props;

        if (!articleList || articleList.length == 0) {
            return null;
        }

        return (
            <View style={styles.container}>

                <ListView
                    contentContainerStyle={styles.contentContainer}
                    dataSource={this.dataSource.cloneWithRows(articleList)}
                    renderRow={this._renderRow}
                    enableEmptySections = {true}
                    renderSeparator={this._renderSeparator}
                    onPressArticle={this.props.onPressArticle}
                    onPressArticleLike={this.props.onPressArticleLike}
                    renderHeader={this._renderHeader}
                    />

            </View>
        );
    }
}

let {width, height} = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 320;

let styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    contentContainer: {
        flexWrap: 'wrap',
    },

    separator: {
        width,
        height: 20,
        backgroundColor: '#e0e0e0',
    },

    headerContainer:{
        height: 36 * DEVICE_WIDTH_RATIO,
        marginLeft: 30 * DEVICE_WIDTH_RATIO,
        marginRight: 30 * DEVICE_WIDTH_RATIO,
        justifyContent: 'center',
        alignItems: 'center',
        borderColor: '#e0e0e0',
        borderTopWidth: 0.5,
        borderLeftWidth: 0.5,
        borderRightWidth: 0.5,
        borderBottomWidth: 0,
        backgroundColor: "#ffffff",
    },
    headerText:{
        // width: 'wrap',
        // height: 'wrap',
        lineHeight: 18,
        fontSize: 16,
        color: '#b0b0b0',
        justifyContent: 'center',
        alignItems: 'center',
    },
});