'use strict';

import React, {Component} from 'react';
import Immutable, {Map} from 'immutable';
import LoadingIndicator from '../../../common/components/LoadingIndicator';
import ContentCell from './ContentCell'
import Footer from './Footer'

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

export default class Detail extends Component {

    constructor(props) {
        super(props);
        this.renderRow = this.renderRow.bind(this);
        this.dataSource = new ListView.DataSource({
            rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
            sectionHeaderHasChanged: (s1, s2) => !Immutable.is(s1, s2)
        });
    }

    renderRow(rowData, sectionID, rowID, highlightRow) {
        switch (sectionID) {

        }
        return null;
    }

    render() {
        let {order_code, detail} = this.props.resource;

        let isFetching = detail.get('isFetching');

        let addressBlob = {

        }

        let dataSource = {
        };

        let buttonArray = detail.get('links')? detail.get('links').toJS() : [];
        return (
            <View style={styles.container}>
                {!isFetching
                    ? <View style={styles.container}>
                            <ListView
                                contentContainerStyle={styles.contentContainer}
                                enableEmptySections={true}
                                showsVerticalScrollIndicator={false}
                                dataSource={this.dataSource.cloneWithRowsAndSections(dataSource)}
                                renderRow={this.renderRow}
                            />
                            {buttonArray.length?<Footer resource={buttonArray}/>: null}
                        </View>
                    : <LoadingIndicator isVisible={isFetching}/>}
            </View>
        );
    }
}

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

let styles = StyleSheet.create({
    container: {
        flex: 1,
        width: width
    },
    contentContainer: {
        backgroundColor: 'white',
        flexDirection: 'row',
        flexWrap: 'wrap'
    },
    listContainer: {
        width: width / 2
    }
});