'use strict';

import React, {Component} from 'react';
import ReactNative from 'react-native';

const {
    View,
    Text,
    StyleSheet,
    Dimensions,
    TouchableOpacity,
} = ReactNative;

export default class LatestHeader extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        let {dataSource, selectIndex} = this.props
        dataSource = dataSource.toJS();
        if (dataSource.length == 0) {
            return null;
        }
        return(
            <View style={styles.container}>
                <View style={styles.content}>
                    {
                        dataSource.map((item ,index) =>{
                            let last = !(index == dataSource.length-1);
                            let selected = index == selectIndex;
                            let kColor = selected ? '#444444' : '#b0b0b0';
                            let kWidth = width/dataSource.length;
                            return (
                                <TouchableOpacity
                                    activeOpacity={1}
                                    onPress={()=>{
                                        this.props.onPressItem&&this.props.onPressItem(item, index)
                                    }}
                                    key={index}
                                >
                                    <View style={styles.item}>
                                        <Text style={[styles.text,{width:kWidth, color:kColor}]}> {item.name} </Text>
                                        {
                                            last ? <View style={styles.line}/> : null
                                        }
                                    </View>
                                </TouchableOpacity>

                            )
                        })
                    }
                </View>
                <View style={styles.bottom}>
                </View>
            </View>
        )
    }
}

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

let styles = StyleSheet.create({
    container: {
        flexDirection: 'column',
        width,
        backgroundColor: 'white',
        height: 45,
    },
    content: {
        flexDirection: 'row',
        width
    },
    item: {
        flexDirection: 'row',
        backgroundColor: 'white',
        height: 45
    },
    text: {
        fontSize: 15,
        color: '#b0b0b0',
        textAlign: 'center',
        paddingTop: 15
    },
    bottom: {
        height: 0.5,
        backgroundColor: '#e5e5e5',
        width
    },
    line: {
        width: 0.5,
        height: 20,
        backgroundColor: '#e0e0e0',
        alignSelf: 'center',
    }
});