'use strict';
import Immutable, {List, Record} from 'immutable';
import LoadMoreIndicator from './indicator/LoadMoreIndicator'
import React, {Component} from 'react';
import moment from 'moment';

import {
    StyleSheet,
    View,
    Text,
    ListView,
    Dimensions,
    Platform,
} 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(rowData,sectionId) {
		switch (sectionId) {

			case 'SECTION_HEADER':
				return (
					<View style={styles.headerContainer}>
						<Text style={[styles.commonText, styles.headerText]}>
							{rowData.title}
						</Text>
						<Text style={[styles.valueText, styles.headerText]}>
							{rowData.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':
				let statusStr = '';
                switch (rowData.stateId) {
                    case 1:
                        statusStr = '已出账单';
                        break;
                    case 2:
                        statusStr = '已付款';
                        break;

                }
                let dateStr = moment(rowData.dateId,'YYYYMMDD').format('YYYY-MM-DD')
				return (
					<View style={styles.cellContainer}>
						<Text style={[styles.inCellText,{flex:0.9}]}>{rowData.brandId}</Text>
						<Text style={[styles.inCellText,{flex:1.0}]}>{dateStr}</Text>
						<Text style={[styles.inCellText,{flex:0.8}]}>{statusStr}</Text>
						<Text style={[styles.inCellText,{flex:1.3}]}>{rowData.orderAmount}</Text>
					</View>
				);
		}

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

	render() {

        let isFetching = this.props.isFetching;

        let loadText = '暂无更多数据';
        if (!this.props.reachEnd) {
            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={()=>{
                        return <LoadMoreIndicator
                                hidden={this.props.hideLoadingFooter}
                                loadingText={loadText}
                                animating={isFetching}
                            />
                    }}
                />
            </View>
		);
	}

}

let navbarHeight = (Platform.OS === 'android') ? 50 : 64;
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: navbarHeight,
        flex:1,
        height: Dimensions.get('window').height-navbarHeight,
    },

    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,
	},
});