import React, {useContext, useMemo} from 'react';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {defaultScreenOptions, ROUTES} from '.';
import {Image, View} from 'react-native';
import Colors from '../Utils/Colors';
import HomeStack from './HomeStack';
import ShopStack from './ShopStack';
import MyOrderStack from './MyOrdersStack';
import {OrderContext} from '../Providers/OrderProvider';
import {AuthContext} from '../Providers/AuthProvider';
import LoadingScreen from '../Screens/Main/LoadingScreen';
import Assets from '../../Assets';

const Tab = createBottomTabNavigator();

export default HomeBottomTabs = () => {
  const {currentOrder} = useContext(OrderContext);
  const {userAllData, askToSignIn} = useContext(AuthContext);
  const totalNumberOfITems = useMemo(
    () =>
      currentOrder.cart
        .filter(cartItem => cartItem.product.type !== 'woosb')
        .map(item => item.quantity)
        .reduce((p, c) => p + c, 0),
    [currentOrder],
  );

  const onTabPress = () => {
    return {
      tabPress: e => {
        if (!userAllData) {
          e.preventDefault();
          askToSignIn();
        }
      },
    };
  };

  const initialRouteName = useMemo(
    () =>
      currentOrder?.cart?.length > 0
        ? ROUTES.MAIN.SHOP.STACK
        : ROUTES.MAIN.HOME.STACK,
    [],
  );

  return (
    <View style={{flex: 1}}>
      {initialRouteName === ROUTES.MAIN.HOME.STACK && <LoadingScreen />}

      <Tab.Navigator
        initialRouteName={initialRouteName}
        screenOptions={{
          ...defaultScreenOptions,
          tabBarShowLabel: false,
          tabBarActiveTintColor: Colors.main_color,
          headerShown: false,
        }}>
        <Tab.Screen
          options={{
            tabBarIcon: HomeIcon,
          }}
          name={ROUTES.MAIN.HOME.STACK}
          component={HomeStack}
        />

        <Tab.Screen
          options={{
            tabBarBadge: totalNumberOfITems || null,
            tabBarIcon: ShopIcon,
          }}
          name={ROUTES.MAIN.SHOP.STACK}
          component={ShopStack}
        />

        <Tab.Screen
          listeners={onTabPress}
          options={{
            tabBarIcon: MyOrdersIcon,
          }}
          name={ROUTES.MAIN.MY_ORDERS.STACK}
          component={MyOrderStack}
        />
      </Tab.Navigator>
    </View>
  );
};

const NavIcon = ({iconColor, iconSource}) => (
  <Image
    source={iconSource}
    style={{width: 25, height: 25, resizeMode: 'contain', tintColor: iconColor}}
  />
);

const HomeIcon = ({color}) => (
  <NavIcon iconColor={color} iconSource={Assets.hut} />
);

const ShopIcon = ({color}) => (
  <NavIcon iconColor={color} iconSource={Assets.shopping} />
);

const MyOrdersIcon = ({color}) => (
  <NavIcon iconColor={color} iconSource={Assets.box} />
);