import { customColor } from '@/constants/Colors';
import { Ionicons } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';
import { Image, StyleSheet, Text, TouchableOpacity, View, ScrollView } from 'react-native';
import ChoicesGroup from '../Selection/ChoicesGroup';
import dayjs from 'dayjs';
import { memo, useEffect, useState } from 'react';
import UserResults from '../modal/UserResults';
import { useLoading, useSnackbar } from '@/contexts';
import CustomButton from '../UI/Button';

export const allVoteStatus = [
	{
		status: 'Không chọn',
		colors: [customColor.status.notVote.start, customColor.status.notVote.middle, customColor.status.notVote.end],
		borderColor: customColor.status.notVote.border,
	},
	{
		status: 'Chưa chọn',
		colors: [customColor.card.backgroundStart, customColor.card.backgroundMiddle, customColor.card.backgroundEnd],
		borderColor: customColor.card.border,
	},
	{
		status: 'Đúng',
		colors: [customColor.status.correct.start, customColor.status.correct.middle, customColor.status.correct.end],
		borderColor: customColor.status.correct.border,
	},
	{
		status: 'Sai',
		colors: [customColor.status.incorrect.start, customColor.status.incorrect.middle, customColor.status.incorrect.end],
		borderColor: customColor.status.incorrect.border,
	},
	{
		status: 'Chờ kết quả',
		colors: [customColor.status.waiting.start, customColor.status.waiting.middle, customColor.status.waiting.end],
		borderColor: customColor.status.waiting.border,
	},
];
function MatchItem({ match, isNewMatch, onIsFocus, isLoadingTab }: { onIsFocus: any; match: any; isNewMatch: boolean; isLoadingTab: boolean }) {
	const start_date = dayjs(match.match_start).format('DD/MM/YYYY HH:mm');
	const end_date = dayjs(match.match_end).format('DD/MM/YYYY HH:mm');
	const result = match.match_result ? match.match_result : '';
	const isChoose = match.options.some((option: any) => option.selected === true);
	const options = [
		'Tất cả',
		...match.options
			.sort((a: any, b: any) => a.option_name.trim().localeCompare(b.option_name.trim()))
			.map((i: any) => {
				return i.option_name;
			}),
	];

	const [userVoteStatus, setUserVoteStatus] = useState<any>();
	const { showSnackbar } = useSnackbar();

	const fetchResult = async () => {
		try {
			let vote_status = allVoteStatus.find((val) => val.status === match.vote_status);
			// if (!isNewMatch) {
			// 	// keo cu
			// 	vote_status = allVoteStatus.find((val) => val.status === match.vote_status);
			// } else {
			// 	const isChoose = match.options.some((option: any) => option.selected === true);
			// 	if (match.match_status == 'Không chọn') {
			// 		vote_status = allVoteStatus.find((val) => val.status === 'Không chọn');
			// 	} else if (match.match_status == 'Đang vote') {
			// 		if (isChoose) {
			// 			console.log('isChoose', isChoose);
			// 			vote_status = allVoteStatus.find((val) => val.status === 'Chờ kết quả');
			// 		} else {
			// 			vote_status = allVoteStatus.find((val) => val.status === 'Chưa chọn');
			// 		}
			// 	} else {
			// 		if (isChoose) {
			// 			vote_status = allVoteStatus.find((val) => val.status === 'Chờ kết quả');
			// 		} else {
			// 			vote_status = allVoteStatus.find((val) => val.status === 'Không chọn');
			// 		}
			// 	}
			// }

			setUserVoteStatus({ status: vote_status?.status, colors: vote_status?.colors, borderColor: vote_status?.borderColor });
		} catch (err: any) {
			console.log('Result error', err.response.data.detail);
			showSnackbar(err.response.data.detail, 'error');
		}
	};

	const fetchColor = () => {
		const vote_status = allVoteStatus.find((val) => val.status === 'Chờ kết quả');
		setUserVoteStatus({ status: vote_status?.status, colors: vote_status?.colors, borderColor: vote_status?.borderColor });
	};

	const handleOnChoose = () => {
		fetchColor();
	};

	useEffect(() => {
		fetchResult();
	}, [isLoadingTab]);

	return (
		<TouchableOpacity
			activeOpacity={1}
			onPress={() => {
				onIsFocus(false);
			}}
		>
			<View>
				{!isLoadingTab && (
					<LinearGradient
						colors={
							userVoteStatus
								? userVoteStatus.colors
								: match.match_status !== 'Hết hạn vote'
								? [customColor.card.backgroundStart, customColor.card.backgroundMiddle, customColor.card.backgroundEnd]
								: allVoteStatus[0].colors
						}
						style={[
							styles.container,
							{
								borderColor: userVoteStatus
									? userVoteStatus.borderColor
									: match.match_status !== 'Hết hạn vote'
									? customColor.card.border
									: allVoteStatus[0].borderColor,
							},
						]}
					>
						<View style={{ alignItems: 'center', marginBottom: 5 }}>
							{
								<CustomButton
									title={userVoteStatus?.status}
									buttonStyle={{
										backgroundColor: userVoteStatus?.colors[1],
										borderRadius: 0,
										borderBottomLeftRadius: 10,
										borderBottomRightRadius: 10,
										borderRightWidth: 1,
										borderLeftWidth: 1,
										borderBottomWidth: 1,
										borderColor: userVoteStatus?.borderColor,
										width: '30%',
									}}
									titleStyle={{ color: customColor.card.darkText2, fontWeight: '600' }}
								/>
							}
						</View>
						<View style={styles.rowContainer}>
							<Text style={styles.darkText}>{start_date.toString()}</Text>
							<Text style={styles.darkText}>{'-'}</Text>
							<Text style={styles.darkText}>{end_date.toString()}</Text>
						</View>
						<View style={styles.verticalDevider}>
							<View style={{ alignItems: 'center', marginBottom: 6, flexDirection: 'row', justifyContent: 'center' }}>
								<Text style={{ ...styles.title, fontSize: 17, color: customColor.card.title2 }}>{match.match_name}</Text>
								{isNewMatch && (
									<Image style={{ width: 30, height: 30, marginHorizontal: 5, marginBottom: 5 }} source={require('../../assets/images/fire-flame.gif')} />
								)}
							</View>
							{result != '' ? (
								<View style={{ alignItems: 'center' }}>
									<Text style={{ ...styles.title, fontSize: 17, color: customColor.card.title2 }}>{'Kết quả: ' + result}</Text>
								</View>
							) : (
								<></>
							)}
						</View>
						<MatchDetail isChoose={isChoose} isNewMatch={isNewMatch} onChoose={handleOnChoose} match={match} options={options} />
					</LinearGradient>
				)}
			</View>
		</TouchableOpacity>
	);
}

const MatchDetail = memo(
	({ isChoose, isNewMatch, match, onChoose, options }: { isChoose: boolean; isNewMatch: boolean; match: any; onChoose?: any; options: Array<String> }) => {
		const [showVotes, setShowVotes] = useState(false);
		return (
			<View style={[{ flex: 1, padding: 10 }]}>
				<ChoicesGroup onChoose={onChoose} isEnabled={match.match_status !== 'Hết hạn vote'} game={match} gameType="match" />

				<View style={[styles.rowContainer, { marginTop: 10, justifyContent: 'space-between', alignItems: 'center' }, { gap: 6 }]}>
					<View>
						<Text style={styles.darkText}>{`Mô tả: ${match.match_description}`}</Text>
						<Text style={styles.darkText}>{`Tiền cược: ${match.match_money.toLocaleString() + 'đ'}`}</Text>
					</View>
					<TouchableOpacity onPress={() => setShowVotes(true)}>
						<Ionicons name="eye" size={25} />
					</TouchableOpacity>
				</View>
				{showVotes && (
					<UserResults
						options={options.map(String)}
						isNewMatch={isNewMatch}
						game={match}
						gameType="match"
						visible={showVotes}
						onDismiss={() => setShowVotes(false)}
					/>
				)}
			</View>
		);
	},
);

const styles = StyleSheet.create({
	brightText: {
		color: customColor.card.brightText,
	},
	darkText: {
		color: customColor.card.darkText,
	},
	title: {
		fontSize: 16,
		fontWeight: '800',
		color: customColor.card.title,
		textAlign: 'center',
	},
	container: {
		flex: 1,
		borderRadius: 20,
		borderWidth: 1.5,

		paddingHorizontal: 10,
		paddingBottom: 6,
		marginVertical: 10,
		justifyContent: 'center',
	},
	rowContainer: {
		flex: 1,
		flexDirection: 'row',
		justifyContent: 'space-around',
	},
	verticalDevider: {
		marginVertical: 8,
	},
	horizontailDevider: {
		marginHorizontal: 8,
	},
});

export default memo(MatchItem);