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

import React, { useEffect, useState, useRef } from 'react';
import { View, StyleSheet, Animated, Easing, Dimensions } from 'react-native';
import Text from '../atoms/Text';
import { MaterialCommunityIcons } from '@expo/vector-icons';

type LoadingContext = 'character' | 'story' | 'image' | 'saving' | 'loading' | 'cuddly_toy';

const magicalPhrases: Record<LoadingContext, string[]> = {
	character: [
		'Zauberstaub wird gesammelt...',
		'Charaktere erwachen zum Leben...',
		'Magische Eigenschaften werden geformt...',
		'Persönlichkeit wird erschaffen...',
		'Die Geschichte deines Charakters beginnt...',
		'Kreative Funken fliegen...',
		'Charakterzüge werden verfeinert...',
	],
	cuddly_toy: [
		'Dein Kuscheltier wird zum Leben erweckt...',
		'Magische Verwandlung beginnt...',
		'Persönlichkeit wird erschaffen...',
		'Charakter nimmt Gestalt an...',
		'Zauberhafte Details werden hinzugefügt...',
		'Fast fertig, gleich ist es soweit...',
		'Letzte magische Berührungen...',
	],
	story: [
		'Märchenwelten öffnen sich...',
		'Magische Tinte fließt...',
		'Geschichten weben sich...',
		'Abenteuer entfalten sich...',
		'Zauberhafte Momente entstehen...',
		'Fantasie nimmt Gestalt an...',
		'Worte tanzen auf Seiten...',
	],
	image: [
		'Bilder werden zum Leben erweckt...',
		'Farben und Formen verschmelzen...',
		'Künstliche Kreativität entfaltet sich...',
		'Visuelle Magie wird erschaffen...',
		'Digitale Leinwand wird bemalt...',
	],
	saving: [
		'Deine Kreation wird gesichert...',
		'Magische Speicherung läuft...',
		'Daten werden in Sternenstaub verwandelt...',
		'Fortschritt wird konserviert...',
	],
	loading: [
		'Daten werden aus dem Äther geholt...',
		'Magische Verbindungen werden hergestellt...',
		'Informationen materialisieren sich...',
		'Digitale Schätze werden geborgen...',
	],
};

interface MagicalLoadingScreenProps {
	context: LoadingContext;
}

export default function MagicalLoadingScreen({ context }: MagicalLoadingScreenProps) {
	const phrases = magicalPhrases[context];
	const [currentPhrase, setCurrentPhrase] = useState(0);
	const [animations] = useState(() => ({
		sparkleRotation: new Animated.Value(0),
		sparkleScale: new Animated.Value(0.3),
		glowOpacity: new Animated.Value(0.4),
		textOpacity: new Animated.Value(1),
	}));

	const textOpacityRef = useRef(animations.textOpacity);

	useEffect(() => {
		const startAnimations = () => {
			// Rotation Animation
			Animated.loop(
				Animated.timing(animations.sparkleRotation, {
					toValue: 1,
					duration: 4000,
					easing: Easing.linear,
					useNativeDriver: true,
				})
			).start();

			// Scale Animation
			Animated.loop(
				Animated.sequence([
					Animated.timing(animations.sparkleScale, {
						toValue: 1,
						duration: 1500,
						easing: Easing.bezier(0.4, 0, 0.2, 1),
						useNativeDriver: true,
					}),
					Animated.timing(animations.sparkleScale, {
						toValue: 0.3,
						duration: 1500,
						easing: Easing.bezier(0.4, 0, 0.2, 1),
						useNativeDriver: true,
					}),
				])
			).start();

			// Glow Animation
			Animated.loop(
				Animated.sequence([
					Animated.timing(animations.glowOpacity, {
						toValue: 1,
						duration: 1000,
						easing: Easing.bezier(0.4, 0, 0.2, 1),
						useNativeDriver: true,
					}),
					Animated.timing(animations.glowOpacity, {
						toValue: 0.4,
						duration: 1000,
						easing: Easing.bezier(0.4, 0, 0.2, 1),
						useNativeDriver: true,
					}),
				])
			).start();
		};

		startAnimations();

		// Phrase rotation with fade effect
		const interval = setInterval(() => {
			// Fade out - slower animation (800ms instead of 500ms)
			Animated.timing(textOpacityRef.current, {
				toValue: 0,
				duration: 800,
				easing: Easing.ease,
				useNativeDriver: true,
			}).start(() => {
				// Change phrase when fully faded out
				setCurrentPhrase((prev) => (prev + 1) % phrases.length);

				// Fade in - slower animation (800ms instead of 500ms)
				Animated.timing(textOpacityRef.current, {
					toValue: 1,
					duration: 800,
					easing: Easing.ease,
					useNativeDriver: true,
				}).start();
			});
		}, 6000); // Longer display time (6000ms instead of 4000ms)

		return () => clearInterval(interval);
	}, [phrases]);

	const spin = animations.sparkleRotation.interpolate({
		inputRange: [0, 1],
		outputRange: ['0deg', '360deg'],
	});

	return (
		<View style={styles.container}>
			<View style={styles.content}>
				<Animated.View
					style={[
						styles.sparkleContainer,
						{
							transform: [{ rotate: spin }, { scale: animations.sparkleScale }],
							opacity: animations.glowOpacity,
						},
					]}
				>
					<MaterialCommunityIcons name="star-four-points" size={80} color="#FFD700" />
				</Animated.View>
				<Animated.View style={{ opacity: animations.textOpacity, paddingHorizontal: 32 }}>
					<Text style={styles.loadingText}>{phrases[currentPhrase]}</Text>
				</Animated.View>
			</View>
			<View style={styles.infoContainer}>
				<Text style={styles.infoText}>
					Die Verarbeitung dauert circa eine Minute, du kannst die App auch schließen.
				</Text>
			</View>
		</View>
	);
}

const styles = StyleSheet.create({
	container: {
		position: 'absolute',
		top: 0,
		left: 0,
		right: 0,
		bottom: 0,
		backgroundColor: '#000000',
		justifyContent: 'center',
		alignItems: 'center',
		zIndex: 1000,
	},
	content: {
		alignItems: 'center',
		justifyContent: 'center',
	},
	sparkleContainer: {
		marginBottom: 20,
	},
	loadingText: {
		color: '#FFD700',
		fontSize: 20,
		textAlign: 'center',
		marginTop: 20,
		fontFamily: 'serif',
		fontWeight: 'bold', // Text fetter machen
		minHeight: 60, // Fixed height to prevent layout shifts during text changes
		minWidth: 280, // Minimum width to maintain consistent layout
		paddingHorizontal: 20, // Additional padding within the text component
		lineHeight: 30, // Increased line height for better readability
	},
	infoContainer: {
		position: 'absolute',
		bottom: 40,
		left: 0,
		right: 0,
		alignItems: 'center',
		paddingHorizontal: 20,
	},
	infoText: {
		color: 'rgba(255, 255, 255, 0.7)',
		fontSize: 14,
		textAlign: 'center',
		fontFamily: 'system',
		maxWidth: 300,
	},
});