import React, { useEffect, useContext, useState } from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { Icon } from "react-native-elements";
import { Portal, Appbar, useTheme } from "react-native-paper";

import ClassPage from "./Classes/classPage";
import Home from "./Home";
import Map from "./Map";
import CalendarPage from "./calendarPage";
import { RouteContext } from "../../routes/app/context/routes/RouteContext";

import {
  ClassContextProvider,
  ClassContext,
} from "./context/storage/classes/classContext";
import { TaskContextProvider } from "./context/storage/tasks/taskContext";

const Tab = createBottomTabNavigator();

export default function AppNav({ navigation: { navigate } }) {
  const { colors } = useTheme();
  const { route, dispatch } = useContext(RouteContext);

  useEffect(() => {
    if (route == "home") {
      setAppBarTitle("Home");
      setAppBarSubtitle("Arrived.");
    } else if (route == "classes") {
      setAppBarTitle("Classes");
      setAppBarSubtitle("Manage your classes.");
    } else if (route == "calendar") {
      setAppBarTitle("Calendar");
      setAppBarSubtitle("Get everything finished.");
    } else if (route == "map") {
      setAppBarTitle("Map");
      setAppBarSubtitle("Find your way.");
    }
  }, [route]);
  const [appbarTitle, setAppBarTitle] = useState("Home");
  const [appbarSubtitle, setAppBarSubtitle] = useState("Arrived.");

  return (
    <>
      <ClassContextProvider>
        <TaskContextProvider>
          <Appbar.Header style={{ backgroundColor: colors.primary }}>
            <Appbar.Content
              title={appbarTitle}
              subtitle={appbarSubtitle}
              titleStyle={{ fontSize: 24 }}
              subtitleStyle={{ fontSize: 12 }}
            />
            <Appbar.Action icon="cog" onPress={() => navigate("Settings")} />
          </Appbar.Header>

          <Portal.Host>
            <Tab.Navigator
              screenOptions={({ route }) => ({
                tabBarIcon: ({ focused, color, size }) => {
                  let iconName;

                  if (route.name === "Home") {
                    iconName = "home";
                  } else if (route.name === "Classes") {
                    iconName = "university";
                  } else if (route.name === "Calendar") {
                    iconName = "calendar";
                  } else if (route.name === "Map") {
                    iconName = "map";
                  }
                  return (
                    <Icon
                      type="font-awesome"
                      name={iconName}
                      size={18}
                      color={color}
                    />
                  );
                },
              })}
              tabBarOptions={{
                activeTintColor: "#0275d8",
                inactiveTintColor: "gray",
              }}
            >
              <Tab.Screen
                name="Home"
                component={Home}
                listeners={{
                  tabPress: (e) => {
                    dispatch({ type: "ROUTE_HOME" });
                  },
                }}
              />
              <Tab.Screen
                name="Classes"
                component={ClassPage}
                listeners={{
                  tabPress: (e) => {
                    dispatch({ type: "ROUTE_CLASSES" });
                  },
                }}
              />
              <Tab.Screen
                name="Calendar"
                component={CalendarPage}
                listeners={{
                  tabPress: (e) => {
                    dispatch({ type: "ROUTE_CALENDAR" });
                  },
                }}
              />
              <Tab.Screen
                name="Map"
                component={Map}
                listeners={{
                  tabPress: (e) => {
                    dispatch({ type: "ROUTE_MAP" });
                  },
                }}
              />
            </Tab.Navigator>
          </Portal.Host>
        </TaskContextProvider>
      </ClassContextProvider>
    </>
  );
}