import {useState} from "react";
import toast from "react-hot-toast";

interface CardPreguntasProps {
	pregunta: any;
	onNextPilar: () => void;
	actualizarProgreso: () => void;
}

const CardPreguntas: React.FC<CardPreguntasProps> = ({
	pregunta,
	onNextPilar,
	actualizarProgreso,
}) => {
	const [indexSubPregunta, setIndexSubPregunta] = useState(0);
	const [respuesta, setRespuesta] = useState<{[key: string]: any[]}>({});

	const onclickSiguiente = () => {
		const currentPilarResponses = respuesta[pregunta.pilar] || [];
		const hasSelectedOptionForCurrentQuestion =
			currentPilarResponses[indexSubPregunta] !== undefined;
		if (pregunta.pilar !== "Transversal") {
			if (hasSelectedOptionForCurrentQuestion === false) {
				toast.error("Debes seleccionar una opción");
				return;
			}
		} else {
			const subPreguntaIndex: any = `subpregunta${indexSubPregunta}`;
			const respuestaActual =
				respuesta[pregunta.pilar]?.[subPreguntaIndex];

			if (pregunta.preguntas[indexSubPregunta].isMultipleChoice) {
				// Validación para selección múltiple
				if (!respuestaActual || respuestaActual.length === 0) {
					toast.error("Debes seleccionar al menos una opción");
					return;
				}
			} else {
				// Validación para selección única
				if (respuestaActual === undefined || respuestaActual === null) {
					toast.error("Debes seleccionar una opción");
					return;
				}
			}
		}

		actualizarProgreso();

		if (indexSubPregunta < pregunta.preguntas.length - 1) {
			setIndexSubPregunta(indexSubPregunta + 1);
		} else {
			// guardar los datos en localstorage
			localStorage.setItem("respuestas", JSON.stringify(respuesta));
			setIndexSubPregunta(0);
			onNextPilar();
		}
	};

	const handleOptionChange = (e: React.ChangeEvent<HTMLInputElement>) => {
		const isChecked = e.target.checked;
		const value = e.target.value;
		// Tomar el texto del <label> que sigue al checkbox o radio button
		const labelText = e.target.nextElementSibling
			? e.target.nextElementSibling.textContent || ""
			: "";
		if (pregunta.pilar === "Transversal") {
			setRespuesta((prevRespuestas: any) => {
				const pilarRespuestas = {...prevRespuestas[pregunta.pilar]};
				const subPreguntaIndex = `subpregunta${indexSubPregunta}`;

				// hacer que el usuario seleccione al menos una opción

				if (!pilarRespuestas[subPreguntaIndex]) {
					pilarRespuestas[subPreguntaIndex] = pregunta.preguntas[
						indexSubPregunta
					].isMultipleChoice
						? []
						: null;
				}

				if (pregunta.preguntas[indexSubPregunta].isMultipleChoice) {
					if (isChecked) {
						pilarRespuestas[subPreguntaIndex].push(
							labelText || value
						);
					} else {
						pilarRespuestas[subPreguntaIndex] = pilarRespuestas[
							subPreguntaIndex
						].filter(
							(resp: string) =>
								resp !== labelText && resp !== value
						);
					}

					// Eliminar duplicados convirtiendo el arreglo a un Set y luego de vuelta a un arreglo
					pilarRespuestas[subPreguntaIndex] = Array.from(
						new Set(pilarRespuestas[subPreguntaIndex])
					);
				} else {
					pilarRespuestas[subPreguntaIndex] = labelText || value;
				}

				return {
					...prevRespuestas,
					[pregunta.pilar]: pilarRespuestas,
				};
			});
		} else {
			setRespuesta((prevRespuestas: any) => {
				const currentPilarResponses =
					prevRespuestas[pregunta.pilar] || [];

				// Si es radio (o cualquier pregunta que no sea transversal en tu caso)
				if (e.target.type === "radio") {
					// Crear una copia del array de respuestas previas
					const updatedResponses = [...currentPilarResponses];

					// Reemplazar la respuesta actual (si ya existe) o agregarla al final si no existe
					updatedResponses[indexSubPregunta] = value;

					return {
						...prevRespuestas,
						[pregunta.pilar]: updatedResponses,
					};
				} else if (e.target.type === "checkbox") {
					if (isChecked) {
						return {
							...prevRespuestas,
							[pregunta.pilar]: [
								...currentPilarResponses,
								labelText || value,
							],
						};
					} else {
						return {
							...prevRespuestas,
							[pregunta.pilar]: currentPilarResponses.filter(
								(response: string) =>
									response !== labelText && response !== value
							),
						};
					}
				}
			});
		}
	};

	return (
		<>
			<div className="card w-96 md:w-3/4 lg:w-3/4  bg-base-100 shadow-xl">
				<div className="card-body">
					<h1 className="text-3xl text-center font-semibold mb-3 texto-gradiente">
						{pregunta.pilar}
					</h1>
					{pregunta.preguntas[indexSubPregunta] && (
						<div key={indexSubPregunta}>
							{" "}
							{/* <-- Añadido padding, sombra, y margen */}
							<h2 className="card-title text-xl font-semibold pl-5 pr-5 mb-2">
								{pregunta.preguntas[indexSubPregunta].pregunta}
							</h2>
							<label className="mb-2 pl-5 pr-5">
								{pregunta.preguntas[indexSubPregunta]
									.isMultipleChoice
									? "Selecciona una o más opciones:"
									: "Selecciona una opción:"}
							</label>
							<div className="space-y-2 p-5 animate__animated animate__fadeIn">
								{" "}
								{/* <-- Añadido espacio vertical entre elementos */}
								{pregunta.preguntas[
									indexSubPregunta
								].opciones.map((opcion: any) => (
									<div
										key={opcion.id}
										className="flex items-center"
									>
										<input
											className="radio radio-primary mr-2" // <-- Añadido margen a la derecha
											type={
												pregunta.pilar ===
													"Transversal" &&
												pregunta.preguntas[
													indexSubPregunta
												].isMultipleChoice
													? "checkbox"
													: "radio"
											}
											id={opcion.id}
											name={`question-${pregunta.preguntas[indexSubPregunta].id}`}
											value={opcion.valor}
											onChange={handleOptionChange}
										/>
										<label
											htmlFor={opcion.id}
											className="text-gray-700"
										>
											{opcion.texto}
										</label>
									</div>
								))}
							</div>
						</div>
					)}

					<div className="card-actions justify-end">
						<button
							className="btn btn-primary rounded-full"
							onClick={onclickSiguiente}
						>
							Siguiente pregunta
						</button>
					</div>
				</div>
			</div>
			{/* <h1>{pregunta.pilar}</h1>
                {pregunta.preguntas[indexSubPregunta] && (
                <div key={indexSubPregunta}> 
                    <h1>{pregunta.preguntas[indexSubPregunta].pregunta}</h1>
                    <div>
                        {pregunta.preguntas[indexSubPregunta].opciones.map((opcion: any) => (
                            <div key={opcion.id}>
                                <input
                                    type={pregunta.pilar === "Transversal" ? "checkbox" : "radio"}  
                                    id={opcion.id}
                                    name={`question-${pregunta.preguntas[indexSubPregunta].id}`}
                                    value={opcion.valor}
                                    onChange={handleOptionChange}
                                />
                                <label htmlFor={opcion.id}>{opcion.texto}</label>
                            </div>
                        ))}
                    </div>
                </div>
            )} */}

			{/* <button 
            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
            onClick={onclickSiguiente}>Siguiente pregunta</button> */}
		</>
	);
};

export default CardPreguntas;