import { StatusBar } from "expo-status-bar";
import { StyleSheet, View } from "react-native";
import { BottomNav } from "./src/components/BottomNav";
import { colors } from "./src/styles";
import { NotFoundPage } from "./src/pages/NotFound";
import { DataCardsPage } from "./src/pages/datacards";
import { ImagePage } from "./src/pages/image";
import { IndexPage } from "./src/pages/index";
import { SettingsPage } from "./src/pages/settings";
import { TextPage } from "./src/pages/text";
import { Route, RouterProvider, useRouter } from "./src/router";
import { InstanceUrlProvider } from "./src/instanceUrl";
interface Tab {
  label: string;
  route: Route;
  page: React.ComponentType;
  hideInNav?: boolean;
}
const TABS: Tab[] = [
  { label: "Home", route: "home", page: IndexPage },
  { label: "Text", route: "text", page: TextPage, hideInNav: true },
  { label: "Image", route: "image", page: ImagePage, hideInNav: true },
  {
    label: "Data Cards",
    route: "datacards",
    page: DataCardsPage,
    hideInNav: true,
  },
  { label: "Settings", route: "settings", page: SettingsPage },
];
export { TABS, type Tab };

function Screen() {
  const { route } = useRouter();
  return (
    <>
      {TABS.map((tab) => {
        if (tab.route === route) {
          const Page = tab.page;
          return <Page key={tab.route} />;
        }
        return null;
      })}
      {!TABS.some((tab) => tab.route === route) && <NotFoundPage />}
    </>
  );
}

export default function App() {
  return (
    <InstanceUrlProvider>
      <RouterProvider>
        <View style={styles.container}>
          <StatusBar style="light" />
          <View style={{ flex: 1, marginTop: 12 }}>
            <Screen />
          </View>
          <BottomNav />
        </View>
      </RouterProvider>
    </InstanceUrlProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colors.bg,
  },
});
