import { SymbolView } from "expo-symbols";
import { ActivityIndicator, Pressable } from "react-native";

import { AppText as Text } from "../../components/AppText";
import { useThemeColor } from "../../lib/useThemeColor";
import type { WorkspaceState } from "../../state/workspaceModel";
import { workspaceConnectionStatusLabel } from "./workspace-connection-status";

export function WorkspaceConnectionStatus(props: {
  readonly state: WorkspaceState;
  readonly onPress: () => void;
  readonly variant?: "floating" | "sidebar";
}) {
  const iconColor = useThemeColor("--color-icon-muted");
  const isReconnecting = props.state.connectingEnvironments.length > 0;
  const variant = props.variant ?? "floating";

  return (
    <Pressable
      accessibilityHint="Opens environment settings"
      accessibilityLabel={workspaceConnectionStatusLabel(props.state)}
      accessibilityRole="button"
      onPress={props.onPress}
      className={
        variant === "sidebar"
          ? "mx-3 flex-row items-center gap-2 rounded-xl bg-subtle px-3 py-2.5"
          : "flex-row items-center gap-2 rounded-full bg-card px-4 py-2.5"
      }
      style={
        variant === "floating"
          ? {
              shadowColor: "#000",
              shadowOffset: { width: 0, height: 10 },
              shadowOpacity: 0.12,
              shadowRadius: 24,
            }
          : undefined
      }
    >
      {isReconnecting ? (
        <ActivityIndicator color={iconColor} size="small" />
      ) : (
        <SymbolView name="wifi.slash" size={15} tintColor={iconColor} type="monochrome" />
      )}
      <Text className="min-w-0 flex-1 text-sm font-t3-bold text-foreground" numberOfLines={1}>
        {workspaceConnectionStatusLabel(props.state)}
      </Text>
      {variant === "sidebar" ? (
        <SymbolView name="chevron.right" size={11} tintColor={iconColor} type="monochrome" />
      ) : null}
    </Pressable>
  );
}