'use strict';

import React from 'react';
import ReactNative from 'react-native';
import Immutable, {List, Record} from 'immutable';

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._renderHeader = this._renderHeader.bind(this);

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

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

    _renderRow(rowData, sectionID, rowID) { // refactor later
        return (
            <TouchableHighlight onPress={() => {}} underlayColor={'white'} >
                <View style={styles.row}>
                    <View style={styles.firstColumn}>
                        <Text style={styles.blackText}>{rowData.id}</Text>
                        <Text style={styles.blackText}>{rowData.date}</Text>
                    </View>
                    <Text style={styles.redText}>{rowData.num}</Text>
                    <Text style={styles.redText}>{rowData.amount}</Text>
                </View>
            </TouchableHighlight>
        );
    }

    _renderHeader() {
        return (
            <View key={'listHeader'} style={styles.headerContainer}>
                {this.headers}
            </View>
        );
    }

	render() {
        return (
            <ListView
                style={styles.container}
                dataSource={this.ds.cloneWithRows(this.props.content)}
                renderRow={this._renderRow}
                renderSeparator={(sectionID, rowID) => <View key={`${sectionID}-${rowID}`} style={styles.separator}/>}
                renderHeader={this._renderHeader}
                enableEmptySections={true}
            />
        );
    }
}

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',
    }

});