'use strict';

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

import LoadingIndicator from '../../../common/components/LoadingIndicator';
import ProductCell from './ProductCell';

export default class Browse extends Component {

    constructor(props) {
        super(props);

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

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

    _renderRow(rowData, sectionID, rowID) {

        return (
            <ProductCell
                data={rowData}
            />
        );
    }

    render() {

        let {isFetching, productList, categoryList} = this.props.data;
        
        let isLoading = productList.size == 0 && isFetching;

        return (
            <View style={styles.container}>
                <ListView
                    enableEmptySections={true}
                    dataSource={this.dataSource.cloneWithRows(productList.toArray())}
                    renderRow={this._renderRow}
                />
                
                <LoadingIndicator
                    isVisible={isLoading}
                />
            </View>
        );
    }
}

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


let styles = StyleSheet.create({
    container: {
        flex: 1,
    },
});