'use strict';

import React from 'react';
import ReactNative from 'react-native';
import {isEmptyObject} from '../../utils/Utils';

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

export default class IndexListView extends React.Component {

    constructor(props) {
        super (props);
    }

    render() {

        let {dataSource} = this.props;

		if (isEmptyObject(dataSource)) {
			return null;
		}

 		let keyData = [];
		for(var k in dataSource) {
			let name = k;
			if (k == '0-9') {
				name = '0';
			}
			keyData.push(<Text style={styles.text}>{name}</Text>);
		}

        return (
            <View style={styles.container}>
				{keyData.map((elem, index) => {return elem;})}
            </View>
        );
    }
}

let {width, height} = Dimensions.get('window');
let styles = StyleSheet.create({
    container: {
		position: 'absolute',
		width: 10,
		top: 35,
		bottom : 1,
		right: 1,
		backgroundColor: 'rgba(255,255,255,0.2)',
		justifyContent: 'center',
    },
	text: {
		justifyContent: 'center',
		textAlign: 'center',
		fontSize: 10,
		color: 'black',
		fontWeight: 'bold',
		backgroundColor: 'transparent',
		marginTop: 2,
	}
});