import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { createDrawerNavigator } from "@react-navigation/drawer";
import i18n from "i18next";
import React 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 { emailSignInStart, signOutStart } from "../../redux/user/user.actions";
import {
  selectBodyshop,
  selectCurrentUser,
} from "../../redux/user/user.selectors";
import ScreenJobDetail from "../screen-job-detail/screen-job-detail.component";
import ScreenJobList from "../screen-job-list/screen-job-list.component";
import ScreenMessagingConversation from "../screen-messaging-conversation/screen-messaging-conversation.component";
import ScreenMessagingList from "../screen-messaging-list/screen-messaging-list.component";
import ScreenSignIn from "../screen-sign-in/screen-sign-in.component";
import ScreenSettingsComponent from "../screen-settings/screen-settings.component";
const JobStack = createStackNavigator();
const MessagingStack = createStackNavigator();
const BottomTabs = createBottomTabNavigator();
const Drawer = createDrawerNavigator();

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

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

const JobStackNavigator = () => (
  <JobStack.Navigator>
    <JobStack.Screen
      name="JobList"
      options={({ route }) => ({
        title: `${i18n.t("joblist.labels.activejobs")} ${
          JSON.stringify(route.params) | "X"
        }`,
      })}
      component={ScreenJobList}
    />
    <JobStack.Screen name="JobDetail" component={ScreenJobDetail} />
  </JobStack.Navigator>
);

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

const BottomTabsNavigator = () => (
  <BottomTabs.Navigator>
    <BottomTabs.Screen
      name="JobTab"
      options={{ title: i18n.t("joblist.titles.jobtab") }}
      component={JobStackNavigator}
    />
    <BottomTabs.Screen
      name="MessagingTab"
      options={{ title: i18n.t("messaging.titles.messagingtab") }}
      component={MessagingStackNavigator}
    />
  </BottomTabs.Navigator>
);

const DrawerNavigator = () => (
  <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({ currentUser }) {
  const { t } = useTranslation();
  return (
    <NavigationContainer>
      {currentUser.authorized ? <DrawerNavigator /> : <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,
  },
});