import React from 'react'
import { Image } from 'react-native'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Theme from '../../components/theme.style.js';

import Stations from './stations';
import MapContainer from './map/Map';
import Guide from './guide';

const Tab = createBottomTabNavigator();

const screenOptions = ({ route }) => ({
    tabBarShowLabel: false,
    tabBarItemStyle: {
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 1 },
        shadowOpacity: 0.8,
        shadowRadius: 1,
        elevation: 3
    },
    tabBarIcon: ({ focused, color, size }) => {
        let iconName;    
        if(route.name === 'Stations') {
            iconName = focused ? require("../../assets/iqair-station-filled.png") : require("../../assets/iqair-station-outline.png");
            return <Image style={{height: 30, resizeMode: 'contain', width: 40}} source={iconName} />
        } else if (route.name === 'Map') {
            iconName =  focused ? require("../../assets/iqair-map-filled.png") : require("../../assets/iqair-map-outline.png");
            return <Image style={{height: 30, resizeMode: 'contain', width: 40}} source={iconName} />
        } else if(route.name === 'Guide') {
            iconName = require("../../assets/iqair-guide.png");
            return <Image style={{height: 30, resizeMode: 'contain', width: 40}} source={iconName} />
        }
    },
});


const Navigation = () => {
  return (
    <Tab.Navigator initialRouteName="Stations" backBehavior="initialRoute" screenOptions={screenOptions}>
        <Tab.Screen component={Stations} name="Stations" options={{headerShown: false}} />
        <Tab.Screen component={MapContainer} name="Map" options={{headerShown: false}} />
        <Tab.Screen component={Guide} name="Guide" options={{headerShown: false}} />
    </Tab.Navigator>
  )
}

export default Navigation