import dayjs from 'dayjs';
import { customColor } from '@/constants/Colors';
import { Ionicons } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';
import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import ChoicesGroup from '../Selection/ChoicesGroup';
import CustomButton from '../UI/Button';
import UserResults from '../modal/UserResults';
import { memo, useEffect, useState } from 'react';
import { minigameApi } from '@/axios/minigame';
import { useSelector } from 'react-redux';
import { State } from '@/redux';
import convertDatas from '@/converter/dataConverter';
import { useSnackbar } from '@/contexts';
import ChoicesModal from '../Selection/ChoiceModal';

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 MinigameItem({
	onRefresh,
	minigame,
	isNewMatch,
	onIsFocus,
	isLoadingTab,
}: {
	onRefresh: any;
	minigame: any;
	onIsFocus: any;
	isNewMatch: boolean;
	isLoadingTab: boolean;
}) {
	const start_date = dayjs(minigame.minigame_start).format('DD/MM/YYYY HH:mm');
	const end_date = dayjs(minigame.minigame_end).format('DD/MM/YYYY HH:mm');
	const result = minigame.minigame_correct_option ? minigame.minigame_correct_option : ' ';
	const [userVoteStatus, setUserVoteStatus] = useState<any>();
	const { showSnackbar } = useSnackbar();
	const options = [
		'Tất cả',
		...minigame.options
			.sort((a: any, b: any) => a.option_name.trim().localeCompare(b.option_name.trim()))
			.map((i: any) => {
				return i.option_name;
			}),
	];

	const fetchResult = async () => {
		try {
			let vote_status = allVoteStatus.find((val) => val.status === minigame.vote_status);
			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 });
	};

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

	return (
		<TouchableOpacity
			activeOpacity={1}
			onPress={() => {
				onIsFocus(false);
			}}
		>
			<View>
				{!isLoadingTab && (
					<LinearGradient
						colors={
							userVoteStatus
								? userVoteStatus.colors
								: minigame.minigame_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
									: minigame.minigame_status !== 'Hết hạn vote'
									? customColor.card.border
									: allVoteStatus[0].borderColor,
							},
						]}
					>
						<View style={{ alignItems: 'center', marginBottom: 5 }}>
							{
								<CustomButton
									title={userVoteStatus ? userVoteStatus?.status : 'Chưa chọn'}
									buttonStyle={{
										backgroundColor: userVoteStatus
											? userVoteStatus?.colors[1]
											: minigame.minigame_status !== 'Hết hạn vote'
											? [customColor.card.backgroundStart, customColor.card.backgroundMiddle, customColor.card.backgroundEnd]
											: allVoteStatus[0].colors,
										borderRadius: 0,
										borderBottomLeftRadius: 10,
										borderBottomRightRadius: 10,
										borderRightWidth: 1,
										borderLeftWidth: 1,
										borderBottomWidth: 1,
										borderColor: userVoteStatus
											? userVoteStatus?.borderColor
											: minigame.minigame_status !== 'Hết hạn vote'
											? customColor.card.border
											: allVoteStatus[0].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 }}>{`${minigame.minigame_name}`}</Text>
								{isNewMatch && (
									<Image style={{ width: 30, height: 30, marginHorizontal: 5, marginBottom: 5 }} source={require('../../assets/images/fire-flame.gif')} />
								)}
							</View>
							{!isNewMatch ? (
								<View style={{ alignItems: 'center' }}>
									<Text style={{ ...styles.title, fontSize: 17, color: customColor.card.title2 }}>
										{'Đáp án: ' + result + ' (KQ:' + minigame.minigame_result + ')'}
									</Text>
								</View>
							) : (
								<></>
							)}
						</View>
						<MinigameDetail onRefresh={onRefresh} isNewMatch={isNewMatch} onUserVoteStatus={setUserVoteStatus} minigame={minigame} options={options} />
					</LinearGradient>
				)}
			</View>
		</TouchableOpacity>
	);
}

const MinigameDetail = ({
	isNewMatch,
	minigame,
	onRefresh,
	options,
	onUserVoteStatus,
}: {
	onUserVoteStatus: any;
	isNewMatch: boolean;
	minigame: any;
	onRefresh: any;
	onChoose?: any;
	options: Array<String>;
}) => {
	const [showVotes, setShowVotes] = useState(false);
	return (
		<View style={[{ flex: 1, padding: 10 }]}>
			<ChoicesModal
				onRefresh={onRefresh}
				onUserVoteStatus={onUserVoteStatus}
				isEnabled={true}
				// isEnabled={minigame.minigame_status !== 'Hết hạn vote' || !isNewMatch}
				game={minigame}
				gameType="minigame"
				isNewMatch={isNewMatch}
			/>

			<View style={[styles.rowContainer, { marginTop: 10, justifyContent: 'space-between', alignItems: 'center' }, { gap: 6 }]}>
				<View>
					<Text style={styles.darkText}>{`Tiền cược: ${minigame.minigame_money.toLocaleString() + 'đ'}`}</Text>
				</View>
				<TouchableOpacity onPress={() => setShowVotes(true)}>
					<Ionicons name="eye" size={25} />
				</TouchableOpacity>
			</View>
			<UserResults
				options={options.map(String)}
				isNewMatch={isNewMatch}
				game={minigame}
				gameType="minigame"
				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(MinigameItem);