import React from "react";
import { Pressable, StyleSheet, View } from "react-native";
import { minTouchTarget, radius, spacing, theme } from "../theme";

export type FABAction = {
  key: string;
  icon: React.ReactNode;
  onPress: () => void;
  /** e.g. locate-me filled when following the user. */
  active?: boolean;
  accessibilityLabel: string;
  testID?: string;
};

export type FABStackProps = {
  actions: FABAction[];
  testID?: string;
};

/** Vertical stack of floating action buttons over the map (right edge). */
export function FABStack({ actions, testID }: FABStackProps): React.JSX.Element {
  return (
    <View style={styles.stack} testID={testID}>
      {actions.map((action) => (
        <Pressable
          key={action.key}
          onPress={action.onPress}
          accessibilityRole="button"
          accessibilityLabel={action.accessibilityLabel}
          accessibilityState={{ selected: action.active }}
          testID={action.testID}
          style={({ pressed }) => [
            styles.fab,
            action.active && styles.fabActive,
            pressed && styles.fabPressed,
          ]}
        >
          {action.icon}
        </Pressable>
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  stack: {
    gap: spacing[3],
  },
  fab: {
    width: minTouchTarget,
    height: minTouchTarget,
    borderRadius: radius.pill,
    backgroundColor: theme.surface,
    alignItems: "center",
    justifyContent: "center",
    ...theme.shadow,
  },
  fabActive: {
    backgroundColor: theme.signal,
  },
  fabPressed: {
    opacity: 0.85,
  },
});
