import { checkUserSession } from "@/redux/user/user.actions";
import { selectBodyshop, selectCurrentUser } from "@/redux/user/user.selectors";
import { ApolloProvider } from "@apollo/client";
import { Stack } from "expo-router";
import { Icon, Label, NativeTabs } from "expo-router/unstable-native-tabs";
import { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { ActivityIndicator, 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";

function AuthenticatedLayout() {
  const { t } = useTranslation();
  return (
    <NativeTabs minimizeBehavior="onScrollDown" disableTransparentOnScrollEdge>
      <NativeTabs.Trigger name="jobs">
        <Label>{t("joblist.labels.activejobs")}</Label>
        <Icon sf="checklist" drawable="custom_android_drawable" />
      </NativeTabs.Trigger>
      <NativeTabs.Trigger name="settings">
        <Icon sf="gear" drawable="custom_settings_drawable" />
        <Label>{t("settings.titles.settings")}</Label>
      </NativeTabs.Trigger>
      <NativeTabs.Trigger name="search" role="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);

//Custom values were used as the overrides did not work.
const theme = {
  colors: {
    primary: "#005fae",
    onPrimary: "#ffffff",
    primaryContainer: "#d4e3ff",
    onPrimaryContainer: "#001c3a",
    secondary: "#545f71",
    onSecondary: "#ffffff",
    secondaryContainer: "#d8e3f8",
    onSecondaryContainer: "#111c2b",
    tertiary: "#00658d",
    onTertiary: "#ffffff",
    tertiaryContainer: "#c6e7ff",
    onTertiaryContainer: "#001e2d",
    error: "#ba1a1a",
    onError: "#ffffff",
    errorContainer: "#ffdad6",
    onErrorContainer: "#410002",
    background: "#fdfcff",
    onBackground: "#1a1c1e",
    surface: "#fdfcff",
    onSurface: "#1a1c1e",
    surfaceVariant: "#e0e2ec",
    onSurfaceVariant: "#43474e",
    outline: "#74777f",
    outlineVariant: "#c3c6cf",
    shadow: "#000000",
    scrim: "#000000",
    inverseSurface: "#2f3033",
    inverseOnSurface: "#f1f0f4",
    inversePrimary: "#a5c8ff",
    elevation: {
      level0: "transparent",
      level1: "#f0f4fb",
      level2: "#e9eff9",
      level3: "#e1ebf6",
      level4: "#dfe9f5",
      level5: "#dae6f4",
    },
    surfaceDisabled: "rgba(26, 28, 30, 0.12)",
    onSurfaceDisabled: "rgba(26, 28, 30, 0.38)",
    backdrop: "rgba(45, 49, 56, 0.4)",
  },
};
// ...existing code...

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