import { matchApi } from '@/axios/match';
import { minigameApi } from '@/axios/minigame';
import { customColor } from '@/constants/Colors';
import convertDatas from '@/converter/dataConverter';
import { State } from '@/redux';
import dayjs from 'dayjs';
import { useEffect, useState } from 'react';
import { FlatList, SafeAreaView, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
import { Button, IconButton, Modal, Portal } from 'react-native-paper';
import { useSelector } from 'react-redux';
import Input from '../UI/Input';
import { Ionicons, MaterialIcons } from '@expo/vector-icons';
import { useLoading, useSnackbar } from '../../contexts';
import Tooltip from 'react-native-walkthrough-tooltip';
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,
	},
];

export default function UserResults({ visible, game, gameType, onDismiss }: { visible: boolean; game: any; gameType: string; onDismiss: any }) {
	const [fixedVotes, setFixedVotes] = useState<any>([]);
	const [votes, setVotes] = useState<any>([]);
	const [uniqueVotesText, setUniqueVotesText] = useState<string>('');
	const { selectedSeason } = useSelector((state: State) => state.season);
	const { startLoading, stopLoading } = useLoading();
	const { showSnackbar } = useSnackbar();
	const { newMatchs } = useSelector((state: State) => state.match);
	const fetchVotes = async () => {
		console.log("user re")
		let fetchedVotes;
		if (gameType === 'match') {
			fetchedVotes = await matchApi.getAllVote(game.id, selectedSeason);
		} else if (gameType === 'minigame') {
			fetchedVotes = await minigameApi.getAllVote(game.id, selectedSeason);
		}
		const convertedVotes = convertDatas(fetchedVotes?.data.data);
		setVotes(convertedVotes);
		setFixedVotes(convertedVotes);
		calculateVote(convertedVotes);
	};
	const calculateVote = (convertedVotes: any) => {
		interface Vote {
			option: string;
			count: number;
		}
		const uniqueVotes: Vote[] = [];
		game.options.forEach((val: any) => {
			let count = 0;
			convertedVotes.forEach((vote: any) => {
				if (vote.member_option === val.option_name) {
					count++;
				}
			});
			uniqueVotes.push({ option: val.option_name, count: count });
		});
		let text = '';
		uniqueVotes.forEach((val, index) => {
			if (index === uniqueVotes.length - 1) {
				text += `${val.option}: ${val.count} người`;
			} else {
				text += `${val.option}: ${val.count} người\n`;
			}
		});
		setUniqueVotesText(text);
	};
	useEffect(() => {
		const process = async () => {
			try {
				startLoading();
				await fetchVotes();
			} catch (error: any) {
				showSnackbar(error?.response.data.detail, 'error');
			}
			stopLoading();
		};
		if (visible) {
			process();
		}
	}, [visible]);

	const searchVotes = (searchVal: string) => {
		if (searchVal.trim().length <= 0) {
			setVotes(fixedVotes);
		} else {
			const filteredVotes = fixedVotes.filter((val: any) => {
				return (
					val.username.toLowerCase().match(searchVal.toLowerCase()) ||
					val.name.toLowerCase().match(searchVal.toLowerCase()) ||
					(val.member_option && val.member_option.toLowerCase().match(searchVal.toLowerCase()))
				);
			});
			setVotes(filteredVotes);
		}
	};

	const getVoteStatusStyles = (status: string) => {
		const voteStatus = allVoteStatus.find((item) => item.status === status);
		return {
			backgroundColor: voteStatus?.colors ? voteStatus?.colors[0] : 'transparent',
			borderColor: voteStatus?.borderColor || 'transparent',
		};
	};
	const [tooltipVisible, setTooltipVisible] = useState(false);

	return (
		<SafeAreaView>
			<Portal>
				<Modal contentContainerStyle={styles.container} onDismiss={onDismiss} visible={visible}>
					<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
						<View>
							<Text
								style={{
									color: customColor.mainContent.textOnBright,
									fontSize: 18,
									fontWeight: '600',
								}}
							>
								{game[gameType + '_name']}
							</Text>
							<View style={{ paddingVertical: 4 }}>
								<Text
									style={{
										color: customColor.mainContent.textOnBright,
										fontSize: 12,
									}}
								>
									{uniqueVotesText}
								</Text>
							</View>
						</View>
						<TouchableOpacity onPress={onDismiss} style={{ position: 'absolute', right: 0, top: 0 }}>
							<Ionicons name="close-circle" size={30} />
						</TouchableOpacity>
					</View>

					<Input
						onChange={searchVotes}
						placeholder="Tìm kiếm"
						valid={true}
						inputStyle={{
							marginTop: 10,
							borderRadius: 8,
							color: '#C0C0C0',
							padding: 8,
							backgroundColor: customColor.mainContent.overlayStart,
						}}
					/>
					<FlatList
						contentContainerStyle={{ paddingBottom: 50 }}
						data={votes}
						renderItem={({ item }) => {
							const voteStatusStyles = getVoteStatusStyles(item.vote_status);

							return (
								<TouchableOpacity
									onPress={() => {}}
									style={[
										styles.cardContainer,
										{
											backgroundColor: customColor.mainContent.lightBackground,
										},
									]}
								>
									<View style={styles.leftContainer}>
										<View style={styles.userInfo}>
											<Text style={styles.username} adjustsFontSizeToFit>
												{item.name.toUpperCase()}
											</Text>
										</View>
										<Text style={styles.text}>{item.username}</Text>
									</View>
									<View style={styles.rightContainer}>
										{newMatchs === 1 && item.vote_status ? (
											<></>
										) : (
											<View style={[styles.tagContainer, voteStatusStyles]}>
												<Text style={[styles.tag, { textAlign: 'center' }]}>{item.vote_status}</Text>
											</View>
										)}

										<View style={[styles.tagContainer, styles.memberOptionTag, { alignItems: 'flex-end' }]}>
											{item.member_option ? ( //if member option is not null
												<Text style={[styles.tag, { textAlign: 'center' }]}> {item.member_option}</Text>
											) : newMatchs === 1 ? ( //if new match
												<Text style={[styles.tag, { textAlign: 'center' }]}> {'Chưa vote'}</Text>
											) : (
												<></>
											)}
											{/* .{ backgroundColor: '#dddbce' } */}
										</View>
										{/* #dddbce */}
										<Text style={styles.voteTime}>
											{dayjs(item.vote_time).format('DD/MM/YYYY HH:mm') === 'Invalid Date' ? '' : dayjs(item.vote_time).format('DD/MM/YYYY HH:mm')}
										</Text>
									</View>
								</TouchableOpacity>
							);
						}}
					/>
				</Modal>
			</Portal>
		</SafeAreaView>
	);
}

const styles = StyleSheet.create({
	container: {
		backgroundColor: customColor.mainContent.lightBackground,
		margin: 10,
		padding: 10,
		borderWidth: 1,
		borderColor: customColor.card.border,
		borderRadius: 20,
		height: '100%',
	},
	headerContainer: {
		flexDirection: 'row',
		backgroundColor: customColor.mainContent.darkBackground,
		padding: 6,
		columnGap: 4,
	},
	itemContainer: {
		flexDirection: 'row',
		borderBottomWidth: 1,
		padding: 6,
		columnGap: 4,
	},
	status: {
		backgroundColor: customColor.card.backgroundStart,
		justifyContent: 'center',
	},
	text: {
		flexWrap: 'wrap',
		color: customColor.mainContent.textOnBright2,
		flexShrink: 1,
	},
	columnTitle: {
		fontSize: 16,
		fontWeight: '600',
		color: customColor.mainContent.textOnDark2,
		textAlign: 'center',
	},
	cardContainer: {
		flexDirection: 'row',
		justifyContent: 'space-between',
		alignItems: 'center',
		padding: 12,
		marginVertical: 6,
		borderRadius: 8,
		borderWidth: 1,
		borderColor: customColor.card.border,
	},
	leftContainer: {
		flex: 2,
		marginRight: 10,
	},
	rightContainer: {
		flex: 1,
		alignItems: 'flex-end',
	},
	userInfo: {
		flexDirection: 'row',
		alignItems: 'center',
		marginBottom: 5,
	},
	username: {
		fontWeight: 'bold',
		fontSize: 13,
		flexShrink: 1,
	},
	tagContainer: {
		flexDirection: 'row',
		marginBottom: 5,
		borderRadius: 20,
		borderWidth: 1,
		borderColor: customColor.card.border,
	},
	tag: {
		paddingVertical: 2,
		paddingHorizontal: 10,
		fontWeight: '500',
		fontSize: 12,
	},
	memberOptionTag: {
		backgroundColor: '#B2D9EA',
	},
	voteTime: {
		textAlign: 'center',
		fontSize: 11,
	},
	searchContainer: {
		flexDirection: 'row',
		alignItems: 'center',
		marginTop: 10,
		borderRadius: 8,
		padding: 8,
		backgroundColor: customColor.mainContent.overlayStart,
	},
	// searchContainer: {
	// 	flexDirection: 'row',
	// 	alignItems: 'center',
	//   },
	tooltipButton: {
		marginLeft: 8,
	},
});