import { memo, useState, useMemo, useEffect } from 'react';
import { Dimensions, Image, StyleSheet, TouchableWithoutFeedback, View, ActivityIndicator, Text } from 'react-native';
import { ImagePreviewProps } from './types';
import { LOADING_TIMEOUT } from './constants';

const ImagePreview = memo(
	({ index, isSelected, item, renderCustomImage, resizeMode }: ImagePreviewProps) => {
		const [isLoading, setIsLoading] = useState(true);
		const [hasError, setHasError] = useState(false);

		// Get dimensions only once per component instance
		const { height, width } = useMemo(() => Dimensions.get('window'), []);

		// Create memoized styles with dynamic dimensions
		const containerStyle = useMemo(
			() => ({
				height,
				width
			}),
			[height, width]
		);

		// Add loading timeout to prevent infinite spinner
		useEffect(() => {
			const timeoutId = setTimeout(() => {
				if (isLoading) {
					setIsLoading(false);
				}
			}, LOADING_TIMEOUT);

			return () => clearTimeout(timeoutId);
		}, [isLoading]);

		return (
			<View>
				<TouchableWithoutFeedback>
					<View style={containerStyle}>
						{renderCustomImage ? (
							renderCustomImage(item, index, isSelected)
						) : (
							<Image
								resizeMode={resizeMode}
								source={{ uri: item.url }}
								// @ts-ignore
								style={styles.image}
								onLoadStart={() => setIsLoading(true)}
								onLoadEnd={() => setIsLoading(false)}
								onError={() => {
									setHasError(true);
									setIsLoading(false); // Make sure loading stops on error
								}}
								accessible={true}
								accessibilityLabel={`Image ${index + 1}`}
							/>
						)}
						{isLoading && <ActivityIndicator style={styles.loader} color="white" size="large" />}
						{hasError && (
							<View style={styles.errorContainer}>
								<Text style={styles.errorText}>Failed to load image</Text>
							</View>
						)}
					</View>
				</TouchableWithoutFeedback>
			</View>
		);
	},
	(prevProps, nextProps) => {
		// Custom equality check to prevent unnecessary renders
		return (
			prevProps.isSelected === nextProps.isSelected &&
			prevProps.item.url === nextProps.item.url &&
			prevProps.resizeMode === nextProps.resizeMode
		);
	}
);

const styles = StyleSheet.create({
	image: {
		height: '100%',
		width: '100%'
	},
	loader: {
		position: 'absolute',
		top: '50%',
		left: '50%',
		transform: [{ translateX: -15 }, { translateY: -15 }]
	},
	errorContainer: {
		position: 'absolute',
		top: '50%',
		left: '50%',
		transform: [{ translateX: -75 }, { translateY: -15 }],
		backgroundColor: 'rgba(0, 0, 0, 0.7)',
		padding: 10,
		borderRadius: 5
	},
	errorText: {
		color: 'white',
		fontSize: 16
	}
});

export default ImagePreview;