import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { MaterialIcons } from '@expo/vector-icons';
import styleConst from './../constants/Style';

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

    getActiveScreen = function() {
        const route = this.props.navigation.state;
        const activeScreen = route.routes[route.index];
        return activeScreen.routeName;
    };

    render() {
        const { navigation } = this.props;
        const activeScreen = this.getActiveScreen();

        return (
            <View style={$$.wrap}>
                <Tab
                    iconName="person"
                    title="Profile"
                    activeScreen={activeScreen}
                    navigation={navigation}
                />
                <Tab
                    iconName="store"
                    title="Pickup"
                    activeScreen={activeScreen}
                    navigation={navigation}
                />
                <Tab
                    iconName="directions-bike"
                    title="Delivery"
                    activeScreen={activeScreen}
                    navigation={navigation}
                />
            </View>
        );
    }
}

const Tab = ({ iconName, title, activeScreen, navigation }) => {
    const isActive = title === activeScreen;
    return (
        <View style={$$.tab}>
            <TouchableOpacity onPress={() => navigation.navigate(title)}>
                <View style={$$.tabButton}>
                    <MaterialIcons
                        name={iconName}
                        size={24}
                        color={isActive ? 'blue' : 'grey'}
                    />
                    <Text style={$$.tabTitle}>{title}</Text>
                </View>
            </TouchableOpacity>
        </View>
    );
};

const $$ = StyleSheet.create({
    wrap: {
        display: 'flex',
        flexDirection: 'row',
    },
    tab: {
        flex: 1,
        display: 'flex',
        alignItems: 'center',
    },
    tabButton: {
        display: 'flex',
        alignItems: 'center',
        paddingVertical: 2,
    },
    tabTitle: {
        fontSize: 13,
    },
});