import React, { useState, useEffect } from 'react';
import { StyleSheet, View, FlatList, Pressable } from 'react-native';
import { Button, Modal, Portal, Text, Provider } from 'react-native-paper';
import ChoiceButton from './ChoiceButton';
import { useLoading, useSnackbar } from '../../contexts';
import { clientApi } from '@/axios/client';
import { useSelector } from 'react-redux';
import { State } from '@/redux';
import { customColor } from '@/constants/Colors';
import { Ionicons } from '@expo/vector-icons';
import { allVoteStatus } from '../Match/MatchItem';

export default function ChoicesModal({
	onUserVoteStatus,
	game,
	onRefresh,
	gameType,
	isEnabled,
	onChoose,
	isNewMatch,
}: {
	onUserVoteStatus: any;
	game: any | [];
	onRefresh: any;
	gameType: string;
	isEnabled?: boolean;
	onChoose?: any;
	isNewMatch: boolean;
}) {
	const options = game.options.slice().sort((a: any, b: any) => a.option_name.trim().localeCompare(b.option_name.trim()));
	const { showSnackbar } = useSnackbar();
	const { selectedSeason } = useSelector((state: State) => state.season);
	const [visible, setVisible] = useState(false);
	const [selectedOptions, setSelectedOptions] = useState<any[]>([]);
	const { startLoading, stopLoading } = useLoading();

	const isDisabled = !isNewMatch || game.minigame_status == 'Hết hạn vote'; // false --> check dc
	useEffect(() => {
		const initialSelectedOptions = options.filter((option: any) => option.selected);
		setSelectedOptions(initialSelectedOptions);
	}, [game]);

	const ongoinggameSelect = async () => {
		startLoading();

		try {
			const optionIds = selectedOptions.map((option) => option.option_id);
			await clientApi.chooseMinigameOptions(selectedSeason, game.id, optionIds);
			showSnackbar('Bình chọn thành công', 'success');
			let vote_status = allVoteStatus[1];
			if (selectedOptions.length === 0) {
				vote_status = allVoteStatus[1];
			} else {
				vote_status = allVoteStatus[4];
			}
			onUserVoteStatus({ status: vote_status?.status, colors: vote_status.colors, borderColor: vote_status?.borderColor });
			onRefresh();
		} catch (error: any) {
			console.log('error', error);
			showSnackbar(error.response.data.detail, 'error');
			return;
		} finally {
			stopLoading();
		}

		hideModal();
	};

	const onCheck = (option: any) => {
		setSelectedOptions((prevSelectedOptions) =>
			prevSelectedOptions.some((selectedOption) => selectedOption.option_id === option.option_id)
				? prevSelectedOptions.filter((selectedOption) => selectedOption.option_id !== option.option_id)
				: [...prevSelectedOptions, option],
		);
	};

	const showModal = () => {
		if (isEnabled) {
			setVisible(true);
		} else {
			showSnackbar((gameType === 'match' ? 'Trận đấu ' : 'Minigame ') + 'này đã hết hạn vote', 'info');
		}
	};
	const hideModal = () => {
		setVisible(false);
	};

	const renderItem = ({ item }: { item: any }) => (
		<Pressable onPress={() => onCheck(item)} disabled={isDisabled}>
			<View
				style={[
					styles.optionContainer,
					{
						backgroundColor: selectedOptions.some((selectedOption) => selectedOption.option_id === item.option_id) ? '#87CEFA' : '#E0EEEE',
					},
				]}
			>
				<Text style={styles.optionText}>{item.option_name}</Text>
				{selectedOptions.some((selectedOption) => selectedOption.option_id === item.option_id) && (
					<Ionicons name="checkmark" size={20} color="#2F4F4F" style={styles.checkmarkIcon} />
				)}
			</View>
		</Pressable>
	);

	return (
		<View style={styles.container}>
			<Button mode="contained" onPress={showModal} style={styles.button} labelStyle={styles.buttonText}>
				{selectedOptions.length > 0 ? selectedOptions.map((option) => option.option_name).join(', ') : isNewMatch ? 'Nhấn để chọn' : 'Không chọn'}
			</Button>

			{isEnabled && (
				<Portal>
					<Modal visible={visible} onDismiss={hideModal} contentContainerStyle={styles.modal}>
						<View style={styles.modalContent}>
							<View style={styles.modalHeader}>
								<View style={styles.spacer} />
								<Text style={styles.title}>Lựa chọn</Text>
								<Pressable onPress={hideModal} style={styles.closeButton}>
									<Ionicons style={styles.closeButtonText} name="close" size={22} color={customColor.mainContent.darkBackground} />
								</Pressable>
							</View>
							<FlatList
								data={options}
								style={{
									width: '100%',
									maxHeight: 200,
								}}
								renderItem={renderItem}
								showsVerticalScrollIndicator={false}
								keyExtractor={(item) => item.option_id.toString()}
							/>
							{isNewMatch && game.minigame_status !== 'Hết hạn vote' && (
								<Button mode="contained" onPress={ongoinggameSelect} style={styles.okButton} labelStyle={styles.buttonText} disabled={!isNewMatch}>
									Lưu
								</Button>
							)}
						</View>
					</Modal>
				</Portal>
			)}
		</View>
	);
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		alignItems: 'center',
		justifyContent: 'center',
	},
	modal: {
		backgroundColor: '#E0EEEE',
		marginHorizontal: 80,
		marginVertical: 60,
		borderRadius: 15,
		padding: 10,
		alignItems: 'center',
	},
	modalContent: {
		width: '100%',
		alignItems: 'center',
	},
	modalHeader: {
		width: '100%',
		flexDirection: 'row',
		alignItems: 'center',
		marginBottom: 15,
	},
	title: {
		flex: 1,
		fontSize: 16,
		fontWeight: 'bold',
		color: '#4F4F4F',
		textAlign: 'center',
	},
	spacer: {
		width: 24,
	},
	closeButton: {
		position: 'absolute',
		right: 10,
	},
	closeButtonText: {
		fontSize: 16,
		color: '#4F4F4F',
	},
	optionContainer: {
		flex: 1,
		flexDirection: 'row',
		padding: 15,
		marginVertical: 5,
		width: '100%',
		alignItems: 'center',
		justifyContent: 'space-between',
		borderRadius: 10,
	},
	optionText: {
		color: customColor.mainContent.textOnBright,
	},
	checkmarkIcon: {
		marginLeft: 10,
	},
	button: {
		width: 200,
		backgroundColor: '#FFFAF0',
		borderWidth: 1,
		borderColor: '#CFCFCF',
		borderRadius: 10,
	},
	okButton: {
		width: '100%',
		marginTop: 10,
		backgroundColor: customColor.bar.background,
	},
	buttonText: {
		color: '#2F4F4F',
		fontWeight: 'bold',
	},
});