managarten/apps-archived/maerchenzauber/apps/mobile/components/story/StartScreen.tsx

import React, { useEffect, useRef, useState } from 'react';
import {
	View,
	StyleSheet,
	Image as RNImage,
	Animated,
	TextInput,
	ScrollView,
	useWindowDimensions,
} from 'react-native';
import Text from '../atoms/Text';
import Button from '../atoms/Button';

interface StartScreenProps {
	title: string;
	characterName?: string;
	isEditMode?: boolean;
	onTitleChange?: (newTitle: string) => void;
	onCancelEdit?: () => void;
	onSaveEdit?: () => void;
}

export default function StartScreen({
	title,
	characterName,
	isEditMode = false,
	onTitleChange,
	onCancelEdit,
	onSaveEdit,
}: StartScreenProps) {
	const [localTitle, setLocalTitle] = useState(title);
	const { width: windowWidth } = useWindowDimensions();
	const isTablet = windowWidth >= 768;

	// Responsive font sizes
	const titleFontSize = isTablet ? 42 : 32;
	const titleLineHeight = isTablet ? 56 : 42;
	const subtitleFontSize = isTablet ? 18 : 16;

	// Update local title when prop changes
	useEffect(() => {
		setLocalTitle(title);
	}, [title]);
	const fadeAnim = useRef(new Animated.Value(0)).current;
	const slideAnim = useRef(new Animated.Value(20)).current;
	const backgroundFadeAnim = useRef(new Animated.Value(0)).current;
	const hintFadeAnim = useRef(new Animated.Value(0)).current;

	useEffect(() => {
		// Start background fade-in immediately
		Animated.timing(backgroundFadeAnim, {
			toValue: 1,
			duration: 600,
			useNativeDriver: true,
		}).start();

		// Start title fade-in animation after a short delay
		setTimeout(() => {
			Animated.parallel([
				Animated.timing(fadeAnim, {
					toValue: 1,
					duration: 800,
					useNativeDriver: true,
				}),
				Animated.timing(slideAnim, {
					toValue: 0,
					duration: 800,
					useNativeDriver: true,
				}),
			]).start();
		}, 200);

		// Start hint fade-in animation later and slower
		setTimeout(() => {
			Animated.timing(hintFadeAnim, {
				toValue: 1,
				duration: 1200,
				useNativeDriver: true,
			}).start();
		}, 1000);
	}, []);

	const handleTitleChange = (newTitle: string) => {
		setLocalTitle(newTitle);
		onTitleChange?.(newTitle);
	};

	return (
		<View style={styles.container}>
			{/* Background Pattern */}
			<Animated.View style={[styles.backgroundDecoration, { opacity: backgroundFadeAnim }]}>
				<RNImage
					source={require('../../assets/images/backgroundpattern-01.png')}
					style={styles.backgroundImage}
					resizeMode="cover"
				/>
			</Animated.View>

			{/* Content */}
			<View style={[styles.content, { paddingHorizontal: isTablet ? 40 : 24 }]}>
				{!isEditMode && (
					<>
						<Animated.View
							style={[
								styles.titleContainer,
								{ maxWidth: isTablet ? '75%' : '90%' },
								{
									opacity: fadeAnim,
									transform: [{ translateY: slideAnim }],
								},
							]}
						>
							<Text
								variant="header"
								color="#FFFFFF"
								style={[
									styles.title,
									{
										fontSize: titleFontSize,
										lineHeight: titleLineHeight,
										minHeight: titleLineHeight,
									},
								]}
							>
								{localTitle}
							</Text>

							<View style={styles.subtitleContainer}>
								{characterName && (
									<Text
										variant="subheader"
										color="#FFFFFF"
										style={[styles.subtitle, { fontSize: subtitleFontSize }]}
									>
										Eine Geschichte mit {characterName}
									</Text>
								)}
							</View>
						</Animated.View>

						<Animated.View style={[styles.hintContainer, { opacity: hintFadeAnim }]}>
							<Text variant="caption" color="rgba(255, 255, 255, 0.7)" style={styles.hint}>
								Wische um zu beginnen →
							</Text>
						</Animated.View>
					</>
				)}
			</View>

			{/* Edit Mode Overlay - TextInput over the title */}
			{isEditMode && (
				<View style={styles.editOverlay} pointerEvents="auto">
					<View style={styles.editOverlayContent} pointerEvents="auto">
						<ScrollView
							style={styles.editOverlayScroll}
							contentContainerStyle={styles.editOverlayScrollContent}
							showsVerticalScrollIndicator={true}
							persistentScrollbar={true}
							indicatorStyle="white"
							bounces={false}
							keyboardShouldPersistTaps="handled"
						>
							<TextInput
								value={localTitle}
								onChangeText={handleTitleChange}
								multiline
								style={styles.editOverlayInput}
								placeholderTextColor="#AAAAAA"
								placeholder="Titel bearbeiten..."
								autoCorrect={true}
								spellCheck={true}
								autoFocus={true}
								textAlign="center"
							/>
						</ScrollView>

						{/* Action Buttons */}
						<View style={styles.editOverlayButtons}>
							<Button
								title="Abbrechen"
								onPress={onCancelEdit}
								variant="tonal"
								size="md"
								color="#666666"
								style={styles.editButton}
							/>
							<Button
								title="Speichern"
								onPress={onSaveEdit}
								variant="primary"
								size="md"
								color="#4CAF50"
								iconName="checkmark"
								iconSet="sf-symbols"
								iconPosition="left"
								style={styles.editButton}
							/>
						</View>
					</View>
				</View>
			)}
		</View>
	);
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		justifyContent: 'center',
		alignItems: 'center',
		width: '100%',
		height: '100%',
		position: 'relative',
		backgroundColor: '#121212',
	},
	backgroundDecoration: {
		position: 'absolute',
		top: 0,
		left: 0,
		right: 0,
		bottom: 0,
		width: '100%',
		height: '100%',
		overflow: 'hidden',
	},
	backgroundImage: {
		width: '100%',
		height: '100%',
		opacity: 0.02,
	},
	content: {
		flex: 1,
		justifyContent: 'center',
		alignItems: 'center',
		width: '100%',
		zIndex: 1,
	},
	titleContainer: {
		width: '100%',
		alignItems: 'center',
	},
	title: {
		fontWeight: 'bold',
		textAlign: 'center',
		letterSpacing: 1,
		marginBottom: 16,
		textShadowColor: 'rgba(0, 0, 0, 0.3)',
		textShadowOffset: { width: 0, height: 2 },
		textShadowRadius: 4,
		fontFamily: 'Grandstander_700Bold',
		paddingHorizontal: 0,
	},
	subtitleContainer: {
		width: '100%',
		alignItems: 'center',
		minHeight: 64,
		justifyContent: 'flex-start',
	},
	subtitle: {
		textAlign: 'center',
		opacity: 0.9,
		fontWeight: '500',
		lineHeight: 24,
	},
	hintContainer: {
		position: 'absolute',
		bottom: 60,
		minHeight: 20,
	},
	hint: {
		fontSize: 16,
		textAlign: 'center',
		fontStyle: 'italic',
	},
	// Edit Mode Overlay Styles
	editOverlay: {
		position: 'absolute',
		top: 0,
		left: 0,
		right: 0,
		bottom: 0,
		alignItems: 'center',
		justifyContent: 'center',
		paddingHorizontal: 24,
		zIndex: 999,
		backgroundColor: 'rgba(0, 0, 0, 0.7)',
		elevation: 999, // Android
	},
	editOverlayContent: {
		backgroundColor: 'rgba(0, 0, 0, 0.95)',
		borderRadius: 16,
		overflow: 'hidden',
		borderWidth: 2,
		borderColor: 'rgba(76, 175, 80, 0.5)',
		flexDirection: 'column',
		width: '100%',
		maxWidth: 500,
		minHeight: 300,
		maxHeight: '70%',
		zIndex: 1000,
		elevation: 1000, // Android
	},
	editOverlayScroll: {
		flex: 1,
		width: '100%',
	},
	editOverlayScrollContent: {
		padding: 24,
		paddingBottom: 16,
		flexGrow: 1,
	},
	editOverlayInput: {
		color: '#FFFFFF',
		fontSize: 28,
		lineHeight: 40,
		textAlign: 'center',
		minHeight: 200,
		fontWeight: 'bold',
		fontFamily: 'Grandstander_700Bold',
		textAlignVertical: 'top',
	},
	editOverlayButtons: {
		flexDirection: 'row',
		gap: 12,
		padding: 12,
		paddingTop: 8,
		borderTopWidth: 1,
		borderTopColor: 'rgba(255, 255, 255, 0.1)',
	},
	editButton: {
		flex: 1,
	},
});