managarten/apps-archived/nutriphi/apps/mobile/components/ui/FloatingActionButton.tsx

import React from 'react';
import { TouchableOpacity, Text, View } from 'react-native';
import Animated, {
	useSharedValue,
	useAnimatedStyle,
	withSpring,
	interpolate,
} from 'react-native-reanimated';
import { SFSymbol } from './SFSymbol';

interface FloatingActionButtonProps {
	onPress: () => void;
	icon?: string;
	sfSymbol?: string;
	fallbackIcon?: string;
	disabled?: boolean;
	size?: 'normal' | 'large';
	position?: 'right' | 'center' | 'left';
}

const AnimatedTouchableOpacity = Animated.createAnimatedComponent(TouchableOpacity);

export const FloatingActionButton: React.FC<FloatingActionButtonProps> = ({
	onPress,
	icon = '+',
	sfSymbol,
	fallbackIcon,
	disabled = false,
	size = 'normal',
	position = 'right',
}) => {
	const pressed = useSharedValue(false);

	const animatedStyle = useAnimatedStyle(() => {
		const scale = interpolate(pressed.value ? 1 : 0, [0, 1], [1, 0.95]);

		return {
			transform: [{ scale: withSpring(scale) }],
		};
	});

	const handlePressIn = () => {
		pressed.value = true;
	};

	const handlePressOut = () => {
		pressed.value = false;
	};

	const getContainerStyle = () => {
		const base = { position: 'absolute' as const, bottom: 24, zIndex: 50 };
		switch (position) {
			case 'center':
				return {
					...base,
					width: '100%',
					alignItems: 'center' as const,
				};
			case 'left':
				return { ...base, left: 24 };
			case 'right':
			default:
				return { ...base, right: 24 };
		}
	};

	const getSizeStyle = () => {
		switch (size) {
			case 'large':
				return { width: 80, height: 80 };
			case 'normal':
			default:
				return { width: 64, height: 64 };
		}
	};

	const getIconSize = () => {
		switch (size) {
			case 'large':
				return 32;
			case 'normal':
			default:
				return 24;
		}
	};

	const getTextSize = () => {
		switch (size) {
			case 'large':
				return 'text-3xl';
			case 'normal':
			default:
				return 'text-2xl';
		}
	};

	const renderIcon = () => {
		if (sfSymbol && fallbackIcon) {
			return (
				<SFSymbol
					name={sfSymbol}
					fallbackIcon={fallbackIcon as any}
					size={getIconSize()}
					color="white"
				/>
			);
		}
		return <Text className={`${getTextSize()} font-light text-white`}>{icon}</Text>;
	};

	const combinedStyle = [
		animatedStyle,
		getSizeStyle(),
		position === 'center' ? {} : getContainerStyle(),
	];

	const containerStyle = position === 'center' ? getContainerStyle() : {};

	if (position === 'center') {
		return (
			<View style={containerStyle}>
				<AnimatedTouchableOpacity
					onPress={onPress}
					onPressIn={handlePressIn}
					onPressOut={handlePressOut}
					disabled={disabled}
					activeOpacity={0.8}
					style={[animatedStyle, getSizeStyle()]}
					className={`
            items-center justify-center rounded-full shadow-lg
            ${disabled ? 'bg-gray-400' : 'bg-indigo-500'}
          `}
				>
					{renderIcon()}
				</AnimatedTouchableOpacity>
			</View>
		);
	}

	return (
		<AnimatedTouchableOpacity
			onPress={onPress}
			onPressIn={handlePressIn}
			onPressOut={handlePressOut}
			disabled={disabled}
			activeOpacity={0.8}
			style={combinedStyle}
			className={`
        items-center justify-center rounded-full shadow-lg
        ${disabled ? 'bg-gray-400' : 'bg-indigo-500'}
      `}
		>
			{renderIcon()}
		</AnimatedTouchableOpacity>
	);
};