import React from 'react'
import { View, Text } from 'react-native'
import { TabBar as TVTabBar} from 'react-native-tab-view'
import Elements from '../../components/elements.js';
import Theme from '../../components/theme.style';

interface Props {
    /**
     * The properties from the individual tab bar in tabs.
     */
    item: Object
}

const TabBar = (props: Props) => {
    const { item } = props;

    const RenderLabel = ({route, focused}) => {
        return (
            <View style={{alignItems: 'center'}}>
                <Elements.icon resizeMode="contain" name={focused ? route.activeIcon : route.inActiveIcon} size={20} />
                <Text style={{fontSize: 13, padding: 5, color: focused ? "white" : Theme.colors.lightGray, fontFamily: 'Arial'}}>{route.title}</Text>
            </View>
        )
    }

    return (
        <TVTabBar
            {...item}
            activeColor="white"
            style={{backgroundColor: Theme.colors.primary}}
            indicatorStyle={{ backgroundColor: 'white'}}
            renderLabel={(labelProps) =>  RenderLabel(labelProps)}
        />
    )
}

export default TabBar