import { Pressable, StyleSheet, Text } from "react-native";

import { useAppTheme } from "@/contexts/ThemeContext";
import { fonts, radii } from "@/constants/theme";
import { useFloatingActionBottom } from "@/lib/tab-bar-insets";

type FloatingActionButtonProps = {
  onPress: () => void;
  accessibilityLabel?: string;
};

export function FloatingActionButton({
  onPress,
  accessibilityLabel = "Create",
}: FloatingActionButtonProps) {
  const { colors } = useAppTheme();
  const bottom = useFloatingActionBottom();

  return (
    <Pressable
      accessibilityRole="button"
      accessibilityLabel={accessibilityLabel}
      onPress={onPress}
      style={({ pressed }) => [
        styles.fab,
        {
          bottom,
          backgroundColor: colors.primary,
          shadowColor: colors.foreground,
        },
        pressed && styles.pressed,
      ]}
    >
      <Text style={[styles.icon, { color: colors.primaryForeground }]}>+</Text>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  fab: {
    position: "absolute",
    right: 20,
    width: 56,
    height: 56,
    borderRadius: radii.pill,
    alignItems: "center",
    justifyContent: "center",
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.2,
    shadowRadius: 8,
    elevation: 6,
  },
  pressed: {
    opacity: 0.9,
    transform: [{ scale: 0.96 }],
  },
  icon: {
    fontSize: 32,
    lineHeight: 34,
    fontFamily: fonts.body,
    marginTop: -2,
  },
});