'use strict';

import React, {Component} from 'react';
import ReactNative, {
    View,
    Text,
    Image,
    ListView,
    StyleSheet,
    Dimensions,
    TouchableOpacity,
    InteractionManager,
    Platform,
} from 'react-native';
import HeaderCell from './HeaderCell';
import ListCell from './ListCell';
import LoadMoreIndicator from '../../../common/components/LoadMoreIndicator';
import LoadingIndicator from '../../../common/components/LoadingIndicator';


export default class List 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),
            sectionHeaderHasChanged: (s1, s2) => !Immutable.is(s1, s2),
        });
    }

    renderHeader() {
        if (this.props.data.type == 'editor') {
            let author = this.props.data.get('author').toJS();
            return(
                <HeaderCell resource={author.data}/>
            );
        } else {
            return null;
        }

    }

    renderRow(rowData,sectionID,rowID) {
        let type = this.props.data.get('type');
        return(
            <ListCell
                resource={rowData}
                type={type}
                rowID={rowID}
                onPressCell={this.props.onPressCell}
                onPressShare={this.props.onPressShare}
                onPressLike={this.props.onPressLike}
                onPressHeader={this.props.onPressHeader}
            />
        );
    }

    render() {
        let articles = this.props.data.get('articles');
        let list = articles.get('list');
        let isFetching = articles.get('isFetching');

        if (!list || !list.size) {
            return <LoadingIndicator
                isVisible={isFetching}
            />;
        }

        return (
            <View style={styles.container}>
            <ListView
                contentContainerStyle={styles.contentContainer}
                enableEmptySections={true}
                dataSource={this.dataSource.cloneWithRows(list.toArray())}
                renderRow={this.renderRow}
                renderHeader={this.renderHeader}
                onEndReached={() => {
                    if (list && list.size) {
                        this.props.onEndReached && this.props.onEndReached();
                    }
                }}
                renderFooter={()=>{
                    if (list && list.size && isFetching) {
                        return <LoadMoreIndicator
                                isVisible={true}
                                animating={true}
                            />;
                    } else {
                        return null;
                    }
                }}
            />
            </View>
        );
    }
}

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

let styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f0f0f0',
    },
    contentContainer: {

    },
});