import React, {useEffect} from 'react';
import { Platform, TouchableOpacity, Text } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';
import { useNavigation, useRoute } from '@react-navigation/native';
import Elements from '../../components/elements.js';
import Theme from '../../components/theme.style.js';

import HomeScreen from './home.js';
import PromosScreen from './promo/';
import IQAir from '../iqair';
// import PayatpumpScreen from './../payatpump'; //disable temporarily
import StationsScreen from './station/';
import RewardsScreen from './rewards.js';

const Tab = createBottomTabNavigator();

const screenOptions = ({ route }) => ({
  tabBarIcon: ({ focused, color, size }) => {
    let iconName;    
    if (route.name === 'Home') {
      iconName = focused ? 'activehome' : 'inactivehome';
      return <Elements.icon name={iconName} size={size} color={color} />
    } else if (route.name === 'Promos') {
      iconName = focused ? 'activepromos' : 'inactivepromos';
      return <Elements.icon name={iconName} size={size} color={color} />
    } else if(route.name === 'Payatpump') {
      iconName = focused ? 'activepayatpump' : 'activepayatpump';
      return <Elements.icon name={iconName} size={45} color={color} resizeMode={'contain'} marginBottom={5} />
    } else if (route.name === 'Stations') {
      iconName = focused ? 'activestation' : 'inactivestation';
      return <Elements.icon name={iconName} size={size} color={color} />
    } else if (route.name === 'Rewards') {
      iconName = focused ? 'activerewards' : 'inactiverewards';
      return <Elements.icon name={iconName} size={size} color={color} />
    }
  },
});

const PayatpumpTab = (navigation) => {
  return (
    <TouchableOpacity onPress={() => navigation.navigation.navigate('Payatpump')}
      style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Elements.icon name={'activepayatpump'} size={45} resizeMode={'contain'} marginBottom={-4} />
        <Text style={{ fontSize: 11, color: '#898989', marginBottom: 8 }}>Pay at Pump</Text>
    </TouchableOpacity>
  )
}

const payatpumpOption = (navigation) => {
  return {
    tabBarLabel: 'Pay at Pump',
    tabBarButton: () => PayatpumpTab(navigation)
  }
}

const tabBarOptions = {
  activeTintColor: '#E74610',
  inactiveTintColor: 'gray',
  style: {
    borderColor: 'transparent',
    border: 0,
    elevation: 0,
    paddingTop: Platform.OS == 'ios' ? 5 : 5,
  }
}

const Home = () => {
  const navigation = useNavigation();
  const Stack = createStackNavigator();
  
  const navOptions = () => ({
    headerShown: false
  })
  
  return (
    <Stack.Navigator initialRouteName="Home"  > 
      <Stack.Screen name="Home" key="Home" component={HomeScreen} options={navOptions}  />
      <Stack.Screen name="IQAir" key="IQAir" component={IQAir} initialParams={{navigation: navigation}} options={navOptions} />
    </Stack.Navigator>
  )
}

export default function App(navigation) {

  return (
      <Tab.Navigator initialRouteName="Home" backBehavior="initialRoute" screenOptions={screenOptions} tabBarOptions={tabBarOptions} >
        <Tab.Screen name="Home" component={Home} options={{ tabBarLabel: 'Home', headerShown: false }} />
        <Tab.Screen name="Promos" component={PromosScreen} options={{ tabBarLabel: 'Promos', headerShown: false }} />
        {/* <Tab.Screen name="Payatpump" component={PayatpumpScreen} options={payatpumpOption(navigation)} />  */}
        <Tab.Screen name="Stations" component={StationsScreen} options={{ tabBarLabel: 'Stations', headerShown: false }} />
        <Tab.Screen name="Rewards" component={RewardsScreen} options={{ tabBarLabel: 'Rewards', headerShown: false }} />
      </Tab.Navigator>
  );
}