import moment from 'moment';
import React, { useEffect, useMemo } from 'react';
import { BackHandler, Image, StyleSheet, View } from 'react-native';
import { useDispatch } from 'react-redux';
import { Fonts } from '../../assets/fonts';
import AppHeader from '../../components/AppHeader';
import AppScrollView from '../../components/AppScrollView';
import AppText from '../../components/AppText';
import MainContainer from '../../components/MainContainer';
import { AppHeight, AppShadow } from '../../constants/commonStyle';
import { AppDispatch } from '../../store';
import { Theme } from '../../theme/AppColors';
import { useTheme } from '../../theme/ThemeProvider';

declare function alert(message: string): void;

interface DetailScreenProps {
	route: any;
	navigation: any
}
const DetailScreen = (props: DetailScreenProps) => {

	const { Colors, isDarkMode } = useTheme();
	const styles = useMemo(() => createStyles(Colors), [Colors]);

	const dispatch: AppDispatch = useDispatch();
	const { animeItem } = props.route.params;
	console.log('loggg ---- >', animeItem);

	useEffect(() => {
		const backHandler = BackHandler.addEventListener('hardwareBackPress', () => { return true });
		const unsubscribe = props.navigation.addListener('focus', () => {
		});

		return () => {
			backHandler.remove();
			unsubscribe();
		}

	}, [dispatch, props.navigation]);

	const onBackPress = () => {
		props.navigation.goBack()
	}

	const aitingDate = animeItem.aired.from
		? moment(animeItem.aired.from).format('MMMM Do YYYY')
		: 'Date not available';

	return (
		<MainContainer>
			<View style={styles.container}>

				<AppHeader onBack={onBackPress} buttonTitle='Back' />

				<AppScrollView>

					<AppText top={10} fontFamily={Fonts.MEDIUM} title={animeItem.title_english} />
					<AppText fontFamily={Fonts.REGULAR} textColor={Colors.secondary} label={`${animeItem.rating}`} />
					<AppText top={10} fontFamily={Fonts.REGULAR} label={aitingDate} />

					<View style={styles.imageContainer}>
						<Image
							style={{ height: AppHeight._350, resizeMode: 'cover' }}
							source={{ uri: animeItem?.images?.webp?.large_image_url }}
						/>
					</View>

					<View style={{ flexDirection: 'row', flexWrap: 'wrap', }}>
						{animeItem?.genres?.map((item: any, index: any) => (
							<View style={styles.genreContainer} key={index}>
								<AppText fontFamily={Fonts.REGULAR} label={item.name} />
							</View>
						))}
					</View>

				</AppScrollView>

			</View>
		</MainContainer>
	);
};

const createStyles = (Colors: Theme) => {
	return StyleSheet.create({
		container: {
			flex: 1,
			marginHorizontal: 20
		},
		imageContainer: {
			marginTop: 20,
			padding: 20,
			borderWidth: 1,
			borderColor: Colors.secondaryTransparent,
		},
		genreContainer: {
			padding: 10,
			borderWidth: 1,
			borderColor: Colors.secondaryTransparent,
			marginRight: 20,
			marginTop: 20,
			...AppShadow
		}
	});
};


export default DetailScreen;