import React from "react";
import { Pressable, View } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { useColorScheme } from "nativewind";
import { Text } from "./text";

export interface BottomNavItem<T extends string = string> {
  id: T;
  label: string;
  /** Ionicons glyph name (active state). */
  icon: keyof typeof Ionicons.glyphMap;
  /** Optional outline variant for the inactive state. Defaults to `icon`. */
  iconOutline?: keyof typeof Ionicons.glyphMap;
  /** When false the tab is hidden from the strip. */
  visible?: boolean;
}

export interface BottomNavProps<T extends string = string> {
  items: BottomNavItem<T>[];
  active: T;
  onChange: (tab: T) => void;
}

/**
 * Sticky tab strip used in the extension popup and small-window
 * surfaces. Hidden items collapse the strip naturally; supply the
 * `iconOutline` variant for the inactive state when an icon needs a
 * different glyph.
 */
export function BottomNav<T extends string = string>({
  items,
  active,
  onChange,
}: BottomNavProps<T>) {
  const { colorScheme } = useColorScheme();
  const isDark = colorScheme === "dark";
  const borderColor = isDark ? "rgb(38, 38, 38)" : "rgb(229, 229, 229)";
  const backgroundColor = isDark ? "rgb(0, 0, 0)" : "rgb(255, 255, 255)";

  return (
    <View
      style={{
        flexDirection: "row",
        borderTopWidth: 1,
        borderTopColor: borderColor,
        backgroundColor,
      }}
    >
      {items
        .filter((t) => t.visible !== false)
        .map((t) => (
          <NavTab
            key={t.id}
            label={t.label}
            iconName={t.id === active ? t.icon : (t.iconOutline ?? t.icon)}
            active={t.id === active}
            onPress={() => onChange(t.id)}
          />
        ))}
    </View>
  );
}

interface NavTabProps {
  label: string;
  iconName: keyof typeof Ionicons.glyphMap;
  active: boolean;
  onPress: () => void;
}

function NavTab({ label, iconName, active, onPress }: NavTabProps) {
  const { colorScheme } = useColorScheme();
  const isDark = colorScheme === "dark";
  const tint = active
    ? isDark
      ? "rgb(255, 255, 255)"
      : "rgb(0, 0, 0)"
    : isDark
      ? "rgb(163, 163, 163)"
      : "rgb(115, 115, 115)";
  const pressedBg = isDark ? "rgb(38, 38, 38)" : "rgb(245, 245, 245)";

  return (
    <Pressable
      onPress={onPress}
      style={({ pressed }) => ({
        flex: 1,
        paddingVertical: 8,
        alignItems: "center",
        justifyContent: "center",
        gap: 2,
        backgroundColor: pressed ? pressedBg : "transparent",
      })}
    >
      <Ionicons name={iconName} size={18} color={tint} />
      <Text style={{ color: tint, fontSize: 10, fontWeight: active ? "600" : "400" }}>{label}</Text>
    </Pressable>
  );
}