import { Ionicons } from "@expo/vector-icons";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { createDrawerNavigator } from "@react-navigation/drawer";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import Dinero from "dinero.js";
import i18n from "i18next";
import React, { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { StatusBar as rnStatusBar, StyleSheet } from "react-native";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import {
  checkUserSession,
  emailSignInStart,
  signOutStart,
} from "../../redux/user/user.actions";
import {
  selectBodyshop,
  selectCurrentUser,
} from "../../redux/user/user.selectors";
import ScreenCamera from "../screen-camera/screen-camera";
import ScreenJobDetail from "../screen-job-detail/screen-job-detail.component";
import ScreenJobList from "../screen-job-list/screen-job-list.component";
import ScreenMediaCache from "../screen-media-cache/screen-media-cache.component";
import ScreenMessagingConversation from "../screen-messaging-conversation/screen-messaging-conversation.component";
import ScreenMessagingList from "../screen-messaging-list/screen-messaging-list.component";
import ScreenSettingsComponent from "../screen-settings/screen-settings.component";
import ScreenSignIn from "../screen-sign-in/screen-sign-in.component";
import ScreenSplash from "../screen-splash/screen-splash.component";

const JobStack = createStackNavigator();
const CameraStack = createStackNavigator();
const MessagingStack = createStackNavigator();
const MediaCacheStack = createStackNavigator();
const BottomTabs = createBottomTabNavigator();
const Drawer = createDrawerNavigator();

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
  currentUser: selectCurrentUser,
});

const mapDispatchToProps = (dispatch) => ({
  checkUserSession: () => dispatch(checkUserSession()),
  emailSignInStart: (email, password) =>
    dispatch(emailSignInStart({ email, password })),
  signOutStart: () => dispatch(signOutStart()),
});

Dinero.globalLocale = "en-CA";

const LeftDrawerButton = (props, navigation) => (
  <Ionicons
    {...props}
    name="ios-menu"
    size={24}
    color="dodgerblue"
    style={{ marginLeft: 20 }}
    onPress={() => navigation.toggleDrawer()}
  />
);

const JobStackNavigator = ({ navigation }) => (
  <JobStack.Navigator initialRouteName="JobList">
    <JobStack.Screen
      name="JobList"
      options={({ route }) => ({
        title: `${i18n.t("joblist.labels.activejobs")}`,
        headerLeft: (props) => LeftDrawerButton(props, navigation),
      })}
      component={ScreenJobList}
    />
    <JobStack.Screen
      name="JobDetail"
      component={ScreenJobDetail}
      options={({ route }) => ({
        title:
          (route.params && route.params.title) ||
          i18n.t("joblist.labels.detail"),
      })}
    />
  </JobStack.Navigator>
);

const CameraStackNavigator = ({ navigation }) => (
  <CameraStack.Navigator initialRouteName="TabCameraScreen">
    <CameraStack.Screen
      name="TabCameraScreen"
      options={{ headerShown: false }}
      component={ScreenCamera}
    />
    {/* <CameraStack.Screen
      name="CameraJobSearch"
      component={ScreenCameraJobSearch}
    /> */}

    <CameraStack.Screen name="MediaCache" component={ScreenMediaCache} />
  </CameraStack.Navigator>
);

const MediaCacheStackNavigator = ({ navigation }) => (
  <CameraStack.Navigator initialRouteName="TabMediaCache">
    <CameraStack.Screen
      name="MediaCache"
      options={{ title: i18n.t("mediacache.titles.mediacachetab") }}
      component={ScreenMediaCache}
    />
  </CameraStack.Navigator>
);

const MessagingStackNavigator = ({ navigation }) => (
  <MessagingStack.Navigator>
    <MessagingStack.Screen
      name="MessagingList"
      component={ScreenMessagingList}
    />
    <MessagingStack.Screen
      name="MessagingConversation"
      component={ScreenMessagingConversation}
    />
  </MessagingStack.Navigator>
);

const BottomTabsNavigator = () => (
  <BottomTabs.Navigator
    screenOptions={({ route }) => ({
      tabBarIcon: ({ focused, color, size }) => {
        let iconName;
        if (route.name === "JobTab") {
          iconName = "ios-list";
        } else if (route.name === "MessagingTab") {
          iconName = "ios-chatboxes";
        } else if (route.name === "CameraTab") {
          iconName = "ios-camera";
        } else if (route.name === "MediaCacheTab") {
          iconName = "ios-photos";
        } else {
          //iconName = "customerservice";
        }

        return <Ionicons name={iconName} size={size} color={color} />;
      },
    })}
    tabBarOptions={{
      activeTintColor: "dodgerblue",
      inactiveTintColor: "slategrey",
    }}
  >
    <BottomTabs.Screen
      name="JobTab"
      options={{ title: i18n.t("joblist.titles.jobtab") }}
      component={JobStackNavigator}
    />
    <BottomTabs.Screen
      name="CameraTab"
      options={{ title: i18n.t("camera.titles.cameratab") }}
      component={CameraStackNavigator}
    />
    <BottomTabs.Screen
      name="MediaCacheTab"
      options={{ title: i18n.t("mediacache.titles.mediacachetab") }}
      component={MediaCacheStackNavigator}
    />
    {
      // <BottomTabs.Screen
      //   name="MessagingTab"
      //   options={{ title: i18n.t("messaging.titles.messagingtab") }}
      //   component={MessagingStackNavigator}
      // />
    }
  </BottomTabs.Navigator>
);

const DrawerNavigator = ({ navigation }) => (
  <Drawer.Navigator>
    <Drawer.Screen name="Home" component={BottomTabsNavigator} />
    <Drawer.Screen
      name="Settings"
      options={{
        title: i18n.t("settings.titles.settings"),
      }}
      component={ScreenSettingsComponent}
    />
  </Drawer.Navigator>
);

export function ScreenMainComponent({
  checkUserSession,
  currentUser,
  bodyshop,
}) {
  useEffect(() => {
    checkUserSession();
  }, [checkUserSession]);

  const { t } = useTranslation();

  return (
    <NavigationContainer>
      {currentUser.authorized === null ? (
        <ScreenSplash />
      ) : currentUser.authorized ? (
        bodyshop ? (
          <DrawerNavigator />
        ) : (
          <ScreenSplash />
        )
      ) : (
        <ScreenSignIn />
      )}
    </NavigationContainer>
  );
}
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ScreenMainComponent);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
    paddingTop: Platform.OS === "android" ? rnStatusBar.currentHeight : 0,
  },
});