managarten/apps-archived/maerchenzauber/apps/mobile/components/molecules/VotingButton.tsx

import React, { useState, useRef, useEffect } from 'react';
import { View, StyleSheet, Pressable, Animated } from 'react-native';
import Text from '../atoms/Text';
import Icon from '../atoms/Icon';

interface VotingButtonProps {
	storyId: string;
	initialVoted?: boolean;
	voteCount: number;
	onVote: (storyId: string) => Promise<void>;
	onUnvote: (storyId: string) => Promise<void>;
	size?: 'small' | 'medium' | 'large';
	showCount?: boolean;
}

const VotingButton: React.FC<VotingButtonProps> = ({
	storyId,
	initialVoted = false,
	voteCount,
	onVote,
	onUnvote,
	size = 'medium',
	showCount = true,
}) => {
	const [voted, setVoted] = useState(initialVoted);
	const [isAnimating, setIsAnimating] = useState(false);
	const scaleAnim = useRef(new Animated.Value(1)).current;
	const floatAnim = useRef(new Animated.Value(0)).current;
	const opacityAnim = useRef(new Animated.Value(0)).current;

	// Update voted state when initialVoted prop changes
	useEffect(() => {
		setVoted(initialVoted);
	}, [initialVoted]);

	const sizeConfig = {
		small: { icon: 20, text: 12, padding: 8 },
		medium: { icon: 24, text: 14, padding: 10 },
		large: { icon: 32, text: 16, padding: 12 },
	};

	const config = sizeConfig[size];

	const handlePress = async () => {
		if (isAnimating) return;

		setIsAnimating(true);

		// Store previous state for potential rollback
		const previousVoted = voted;
		const newVoted = !voted;

		// Toggle vote state immediately (optimistic update)
		setVoted(newVoted);

		// Start animations
		if (newVoted) {
			// Vote animation - heart grows and floating heart appears
			Animated.parallel([
				// Main heart bounce
				Animated.sequence([
					Animated.timing(scaleAnim, {
						toValue: 1.4,
						duration: 200,
						useNativeDriver: true,
					}),
					Animated.spring(scaleAnim, {
						toValue: 1,
						friction: 3,
						tension: 100,
						useNativeDriver: true,
					}),
				]),
				// Floating heart animation
				Animated.sequence([
					Animated.timing(opacityAnim, {
						toValue: 1,
						duration: 100,
						useNativeDriver: true,
					}),
					Animated.parallel([
						Animated.timing(floatAnim, {
							toValue: -50,
							duration: 800,
							useNativeDriver: true,
						}),
						Animated.timing(opacityAnim, {
							toValue: 0,
							duration: 800,
							useNativeDriver: true,
						}),
					]),
				]),
			]).start(() => {
				floatAnim.setValue(0);
				opacityAnim.setValue(0);
			});
		} else {
			// Unvote animation - heart shrinks slightly
			Animated.sequence([
				Animated.timing(scaleAnim, {
					toValue: 0.8,
					duration: 100,
					useNativeDriver: true,
				}),
				Animated.spring(scaleAnim, {
					toValue: 1,
					friction: 3,
					tension: 100,
					useNativeDriver: true,
				}),
			]).start();
		}

		try {
			if (newVoted) {
				await onVote(storyId);
			} else {
				await onUnvote(storyId);
			}
		} catch (error) {
			// Revert to previous state on error
			setVoted(previousVoted);
			console.error('Error toggling vote:', error);
		} finally {
			setIsAnimating(false);
		}
	};

	return (
		<View style={styles.container}>
			{/* Floating heart for animation */}
			<Animated.View
				style={[
					styles.floatingHeart,
					{
						opacity: opacityAnim,
						transform: [{ translateY: floatAnim }, { scale: 1.2 }],
					},
				]}
				pointerEvents="none"
			>
				<Icon set="ionicons" name="heart" size={config.icon} color="#FFD700" />
			</Animated.View>

			{/* Main voting button */}
			<Pressable
				onPress={handlePress}
				style={({ pressed }) => [
					styles.button,
					{ padding: config.padding },
					!showCount && styles.buttonCircular,
					pressed && styles.buttonPressed,
				]}
			>
				<Animated.View
					style={[
						styles.iconContainer,
						{
							transform: [{ scale: scaleAnim }],
						},
					]}
				>
					<Icon
						set="ionicons"
						name={voted ? 'heart' : 'heart-outline'}
						size={config.icon}
						color={voted ? '#FFD700' : '#999999'}
					/>
				</Animated.View>
				{showCount && (
					<Text
						style={[styles.voteCount, { fontSize: config.text }, voted && styles.voteCountActive]}
					>
						{voteCount}
					</Text>
				)}
			</Pressable>
		</View>
	);
};

const styles = StyleSheet.create({
	container: {
		position: 'relative',
	},
	button: {
		flexDirection: 'row',
		alignItems: 'center',
		backgroundColor: 'rgba(255, 255, 255, 0.1)',
		borderRadius: 20,
		gap: 6,
	},
	buttonCircular: {
		width: 40,
		height: 40,
		borderRadius: 20,
		justifyContent: 'center',
		gap: 0,
	},
	buttonPressed: {
		opacity: 0.8,
	},
	iconContainer: {
		alignItems: 'center',
		justifyContent: 'center',
	},
	voteCount: {
		fontWeight: '600',
		color: '#999999',
	},
	voteCountActive: {
		color: '#FFD700',
	},
	floatingHeart: {
		position: 'absolute',
		top: -10,
		left: '50%',
		marginLeft: -12,
		zIndex: 100,
	},
});

export default VotingButton;