'use strict';

import React from 'react';
import ReactNative from 'react-native';
import Immutable, {List, Record} from 'immutable';
import PlainTextSection from './PlainTextSection';
import Placeholder from './Placeholder';
import LoadMoreIndicator from './indicator/LoadMoreIndicator';
import DatePicker from './DatePicker';
import moment from 'moment';

const {
    Component,
} = React;


const {
    View,
    Text,
    Image,
    ListView,
    TouchableHighlight,
    Dimensions,
    StyleSheet,
} = ReactNative;


export default class FixedHeaderList extends Component {

    // static propTypes = {
    //     content: React.PropTypes.arrayOf(
    //         React.PropTypes.shape({
    //             type: React.PropTypes.string,
    //             thumb: React.PropTypes.number,
    //             title: React.PropTypes.string,
    //         })
    //     ),
    //     onPress: React.PropTypes.func,
    // };

    constructor(props) {
        super(props);

        this._renderRow = this._renderRow.bind(this);
        // this.dataSource = ds.cloneWithRows(this.props.content);
        this.ds = new ListView.DataSource({
            rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
            sectionHeaderHasChanged: (s1, s2) => !Immutable.is(s1, s2),
        });
    }

    _renderRow(rowData, sectionID, rowID) {
        switch (sectionID) {
            case 'SECTION_HEADER':
                return (
                    <View style={styles.container}>
                        <PlainTextSection content={rowData.section2} />
                        <Placeholder containerStyle={{borderBottomWidth: 0}}/>
                    </View>
                );


            case 'SECTION_TIME':
                return (
                    <View style={styles.container}>
                        <DatePicker currentStartDate={this.props.currentStartDate}
                            currentEndDate={this.props.currentEndDate}
                            maxDate={this.props.maxDate}
                            newDatePicked={this.props.newDatePicked}
                            showDatePickerIOS={this.props.showDatePickerIOS}/>
                        <Placeholder containerStyle={{borderBottomWidth: 0}}/>
                    </View>
                );

            case 'SECTION_TITLE':
                let headers = [];
                for (let i = 0; i < rowData.header.length; i++) {
                    headers.push(<Text style={styles.headerText}>{rowData.header[i]}</Text>);
                    if (i !== (rowData.header.length - 1)) {
                        headers.push(<View style={{width: 1, height: 14, backgroundColor: '#e5e5e5'}}/>);
                    }
                }
                return (
                    <View key={'listHeader'} style={styles.headerContainer}>
                        {headers}
                    </View>
                );

            case 'SECTION_CONTENT':
                return (
                    <TouchableHighlight onPress={() => {}} underlayColor={'white'} >
                        <View style={styles.row}>
                            <View style={styles.firstColumn}>
                                <Text style={styles.blackText}>{rowData.requisitionFormId || rowData.outFormId}</Text>
                                <Text style={styles.blackText}>{moment(rowData.dateId, 'YYYYMMDD').format('YYYY-MM-DD')}</Text>
                            </View>
                            <Text style={styles.redText}>{rowData.inStorageNums || rowData.outStorageNums}</Text>
                            <Text style={styles.redText}>{(rowData.inStorageAmount && rowData.inStorageAmount.toFixed(2)) || (rowData.outStorageAmount && rowData.outStorageAmount.toFixed(2))}</Text>
                        </View>
                    </TouchableHighlight>
                );
            default:
                return (
                    <Text>Error data source</Text>
                );
        }
    }

	render() {

        let isFetching = this.props.isFetching;

        let loadText = '暂无更多数据';
        if (!this.props.reachEnd) {
            loadText = isFetching ? '正在加载...' : '上拉加载更多';
        }

        return (
            <ListView
                style={styles.container}
                dataSource={this.ds.cloneWithRowsAndSections(this.props.section.toJS())}
                renderRow={this._renderRow}
                renderSeparator={(sectionID, rowID) => <View key={`${sectionID}-${rowID}`} style={styles.separator}/>}
                onEndReached={this.props.requestData}
                enableEmptySections={true}
                removeClippedSubviews={false}
                renderFooter={()=>{
                    return <LoadMoreIndicator
                            hidden={this.props.hideLoadingFooter}
                            loadingText={loadText}
                            animating={isFetching}
                        />
                }}
            />
        );
    }
}

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

let styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    separator: {
        height: 1,

    },
    headerContainer: {
        flexDirection: 'row',
        backgroundColor: 'white',
        height: 45,
        alignItems: 'center',
        borderBottomColor: '#F0F0F0',
        borderBottomWidth: 1,
    },
    headerText: {
        fontSize: 14,
        color: '#444444',
        textAlign: 'center',
        flex: 1,
    },
    row: {
        flexDirection: 'row',
        paddingTop: 15,
        paddingBottom: 15,
        alignItems: 'center',
        backgroundColor: 'white',
    },
    firstColumn: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
    },
    blackText: {
        fontSize: 14,
        color: '#444444',
        textAlign: 'center',
    },
    redText: {
        fontSize: 14,
        color: '#D0021B',
        flex: 1,
        textAlign: 'center',
    }

});