import { Text, View, Pressable } from "react-native";
import { use, useState, type ReactNode } from "react";
import { RouterContext, type Route } from ".";
import { General } from "./settings/general";
import { Accounts } from "./settings/accounts";
import { Family } from "./settings/family";
import { useKeyboard } from "./useKeyboard";
import { Modal } from "react-native-opentui";

type SettingsRoute = Extract<Route, `/settings${string}`>;

const TABS = {
  "/settings": {
    label: "💽 General",
    screen: <General />,
  },
  "/settings/accounts": {
    label: "🏦 Bank Accounts",
    screen: <Accounts />,
  },
  "/settings/family": {
    label: "👑 Family",
    screen: <Family />,
  },
} as const satisfies Record<
  SettingsRoute,
  { label: string; screen: ReactNode }
>;

type Tab = keyof typeof TABS;

export function Settings() {
  const { route, setRoute } = use(RouterContext);

  useKeyboard(
    (key) => {
      if (key.name == "h") {
        const currentIdx = Object.entries(TABS).findIndex(
          ([tabRoute, _]) => tabRoute == route,
        );
        const routes = Object.keys(TABS) as SettingsRoute[];
        const last = routes[currentIdx - 1];
        if (!last) return;
        setRoute(last);
      } else if (key.name == "l") {
        const currentIdx = Object.entries(TABS).findIndex(
          ([tabRoute, _]) => tabRoute == route,
        );
        const routes = Object.keys(TABS) as SettingsRoute[];
        const next = routes[currentIdx + 1];
        if (!next) return;
        setRoute(next);
      }
    },
    [route],
  );

  return (
    <View style={{ flexDirection: "row" }}>
      <View style={{ padding: 10 }}>
        {Object.entries(TABS).map(([tabRoute, tab]) => {
          const isSelected = tabRoute == route;

          return (
            <Pressable
              key={tab.label}
              style={{ backgroundColor: isSelected ? "black" : undefined }}
              onPress={() => setRoute(tabRoute as SettingsRoute)}
            >
              <Text
                style={{
                  fontFamily: "mono",
                  color: isSelected ? "white" : "black",
                }}
              >
                {" "}
                {tab.label}{" "}
              </Text>
            </Pressable>
          );
        })}
      </View>

      <View>{TABS[route as Tab].screen}</View>
    </View>
  );
}