import { checkUserSession } from "@/redux/user/user.actions";
import { selectBodyshop, selectCurrentUser } from "@/redux/user/user.selectors";
import { ApolloProvider } from "@apollo/client";
import MaterialIcons from "@expo/vector-icons/MaterialIcons";
import { Stack } from "expo-router";
import {
  Icon,
  Label,
  NativeTabs,
  VectorIcon,
} from "expo-router/unstable-native-tabs";
import { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { ActivityIndicator, Platform, View } from "react-native";
import { Provider as PaperProvider } from "react-native-paper";
import { connect, Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import { createStructuredSelector } from "reselect";
import { client } from "../graphql/client";
import { persistor, store } from "../redux/store";
import "../translations/i18n";
import theme from "../util/theme";

function AuthenticatedLayout() {
  const { t } = useTranslation();
  return (
    <NativeTabs minimizeBehavior="onScrollDown" disableTransparentOnScrollEdge>
      <NativeTabs.Trigger name="jobs">
        <Label>{t("joblist.labels.activejobs")}</Label>

        {Platform.select({
          ios: <Icon sf="checklist" drawable="custom_android_drawable" />,
          android: (
            <Icon
              src={<VectorIcon family={MaterialIcons} name="checklist" />}
            />
          ),
        })}
      </NativeTabs.Trigger>
      <NativeTabs.Trigger name="settings">
        {Platform.select({
          ios: <Icon sf="gear" drawable="custom_android_drawable" />,
          android: (
            <Icon src={<VectorIcon family={MaterialIcons} name="settings" />} />
          ),
        })}
        <Label>{t("settings.titles.settings")}</Label>
      </NativeTabs.Trigger>
      <NativeTabs.Trigger name="search" role="search">
        {Platform.select({
          //ios: <Icon sf="checklist" drawable="custom_android_drawable" />,
          android: (
            <Icon src={<VectorIcon family={MaterialIcons} name="search" />} />
          ),
        })}
        <Label>Search</Label>
      </NativeTabs.Trigger>
    </NativeTabs>
  );
}

function UnauthenticatedLayout() {
  return (
    <Stack>
      <Stack.Screen name="sign-in" options={{ headerShown: false }} />
    </Stack>
  );
}

function LoadingLayout() {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <ActivityIndicator size="large" />
    </View>
  );
}

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
  currentUser: selectCurrentUser,
});
const mapDispatchToProps = (dispatch) => ({
  checkUserSession: () => dispatch(checkUserSession()),
});
function AppContent({ currentUser, checkUserSession, bodyshop }) {
  useEffect(() => {
    checkUserSession();
  }, []);

  if (currentUser.authorized === null) {
    return <LoadingLayout />;
  }
  if (currentUser.authorized) {
    return <AuthenticatedLayout />;
  }
  return <UnauthenticatedLayout />;
}
const ConnectedAppContent = connect(
  mapStateToProps,
  mapDispatchToProps
)(AppContent);

export default function AppLayout() {
  return (
    <Provider store={store}>
      <PersistGate persistor={persistor}>
        <ApolloProvider client={client}>
          <PaperProvider theme={theme}>
            <ConnectedAppContent />
          </PaperProvider>
        </ApolloProvider>
      </PersistGate>
    </Provider>
  );
}