'use strict';
import Immutable, {List, Record} from 'immutable';

import React, {Component} from 'react';

import {
    StyleSheet,
    View,
    Text,
    ListView,
    Dimensions,
    ActivityIndicatorIOS,
    Platform,
    ProgressBarAndroid,
} from 'react-native';


let seporatorColor = '#e5e5e5'


export default class AccountSettlement extends Component {

    constructor(props) {
        super (props);

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

        this.renderRow = this.renderRow.bind(this);
    }

	renderRow(Data,sectionId) {
        console.log(Data);
		switch (sectionId) {

			case 'SECTION_HEADER':
				return (
					<View style={styles.headerContainer}>
						<Text style={[styles.commonText, styles.headerText]}>
							{Data.title}
						</Text>
						<Text style={[styles.valueText, styles.headerText]}>
							{Data.content}
						</Text>
					</View>
				);
			case 'SECTION_SEPORATOR':
				return(
					<View style={{
						height:15,
						borderBottomWidth:0.5,
						borderColor:seporatorColor,
					}}/>
				);
			case 'SECTION_TITLE':
				return(
					<View style={styles.cellContainer}>
						<Text style={[styles.inCellText,{flex:0.9}]}>品牌</Text>
						<View style={{width:1,height:14,backgroundColor:seporatorColor,marginTop:15}}/>
						<Text style={[styles.inCellText,{flex:1.0}]}>生成日期</Text>
						<View style={{width:1,height:14,backgroundColor:seporatorColor,marginTop:15}}/>
						<Text style={[styles.inCellText,{flex:0.8}]}>状态</Text>
						<View style={{width:1,height:14,backgroundColor:seporatorColor,marginTop:15}}/>
						<Text style={[styles.inCellText,{flex:1.3}]}>账单金额（元）</Text>

					</View>
				);
			case 'SECTION_CONTENT':
				return (
					<View style={styles.cellContainer}>
						<Text style={[styles.inCellText,{flex:0.9}]}>{Data.brand}</Text>
						<Text style={[styles.inCellText,{flex:1.0}]}>{Data.date}</Text>
						<Text style={[styles.inCellText,{flex:0.8}]}>{Data.status}</Text>
						<Text style={[styles.inCellText,{flex:1.3}]}>{Data.bill}</Text>
					</View>
				);
		}

		return (<Text>Error data source</Text>);
	}
	render() {

        let isFetching = this.props.isFetching;
        let loadText = isFetching?'加载中':'上拉加载更多';

		return (
            <View>
                <ListView
                    style={styles.container}
                    dataSource={this.dataSource.cloneWithRowsAndSections(this.props.dataBlob.toJS())}
                    renderRow={this.renderRow}
                    onEndReachedThreshold={-50}
                    onEndReached={this.props.fetchNextPage}
                    enableEmptySections={true}
                    renderFooter={()=>{
                        if (Platform.OS === 'android') {
                            return <View style={styles.footerContainer}>
                                <ProgressBarAndroid style={styles.footerIndicator}/>
                                <Text style = {styles.footerText}>{loadText}</Text>
                            </View>
                        } else {
                            return <View style={styles.footerContainer}>
                                <ActivityIndicatorIOS style={styles.footerIndicator} size='small' animating={isFetching}/>
                                <Text style = {styles.footerText}>{loadText}</Text>
                            </View>
                        }
                    }}
                />
            </View>
		);
	}

}

const styles = StyleSheet.create({

	cellContainer: {
		backgroundColor:'white',
		flexDirection: 'row',
		height: 45,
		borderBottomWidth:0.5,
		borderColor:seporatorColor,
	},

	inCellText:{
		fontSize: 14,
		marginTop: 15,
		color: '#444444',
		flex:1,
		borderBottomWidth:0.5,
		borderColor:seporatorColor,
		textAlign: 'center',
	},

    footerContainer: {
        flexDirection: 'row',

    },
    footerIndicator: {
        marginTop: 15,
        marginLeft: Dimensions.get('window').width/2-50,
        marginRight: 10,
    },
    footerText: {
        marginTop: 17,
        textAlign: 'center',
        color:'#b1b1b1',
    },

    container: {
        top: 64,
        flex:1,
        height: Dimensions.get('window').height-64,
    },

    headerContainer: {
    	flex: 1,
    	height: 80,
    	backgroundColor:'white',
    	flexDirection:'column',
		borderBottomWidth:0.5,
		borderColor:seporatorColor,
    },

	commonText:{
		fontSize: 14,
		marginTop: 20,
		fontWeight:"300",
		color: '#444444'
	},

	valueText:{
		fontSize: 21,
		marginTop: 10,
		fontWeight: 'bold',
		color: '#d0021b'
	},

	headerText: {
		left:15,
	},
});