import React from 'react'

import { TouchableOpacity, View, Text, StyleSheet } from 'react-native'
import theme from '../theme'

const TabBar = props => (
    <View style={styles.container}>
        <View style={styles.body}>
            {props.tabs.map((tab, i) => (
                // change the style to fit your needs
                <TouchableOpacity
                    activeOpacity={0.9}
                    key={tab.key || i}
                    style={styles.itemContainer}
                    onPress={() => {
                        const {goToTab, onTabClick} = props;
                        // tslint:disable-next-line:no-unused-expression
                        onTabClick && onTabClick(props.tabs[i], i);
                        // tslint:disable-next-line:no-unused-expression
                        goToTab && goToTab(i);
                    }}
                >
                    <Text style={styles.title}>
                        {tab.title}
                    </Text>
                    <View style={{
                        backgroundColor: props.activeTab === i ? theme.brand_primary : undefined,
                        height: 3,
                        borderRadius: 2,
                        width: 25
                    }}></View>
                </TouchableOpacity>
            ))}
        </View>
        {props.rightComponent ? props.rightComponent : null}
    </View>
)


const styles = StyleSheet.create({
    container: {
        flexDirection: 'row', 
        backgroundColor: '#fff', 
        borderColor: '#fff'
    },
    body: {
        flex: 1,
        paddingHorizontal: 16,
        flexDirection: 'row',
        justifyContent: 'flex-start',
        width: 180,
        height: 34,
        paddingTop: 6
    },
    itemContainer:{
        width: 70,
        alignItems: 'center'
    },
    title:{
        color: '#333',
        fontSize: 16,
        marginBottom: 5
    }
});

export default TabBar