import {empresasDiagnostico} from "../api_backend/api";
import {useEffect, useState} from "react";
import toast from "react-hot-toast";
import Select from "react-select";
interface CardEmpresaProps {
	cambiarComponente: () => void;
}
const CardEmpresa: React.FC<CardEmpresaProps> = ({cambiarComponente}) => {
	const [empresa, setEmpresa] = useState();
	const [selectEmpresa, setSelectEmpresa] = useState(null);
	const [datosEmpresa, setDatosEmpresa] = useState({});
	const [email, setEmail] = useState("");
	const [descripcionEmpresa, setDescripcionEmpresa] = useState("");
	const [emailValidation, setEmailValidation] = useState(false);
	const [emailTouched, setEmailTouched] = useState(false);
	const [caracterLimitBool, setCaracterLimitBool] = useState(false);
	const [caracterLimitBoolMin, setCaracterLimitBoolMin] = useState(false);

	useEffect(() => {
		empresasDiagnostico().then((data) => {
			const formatoSelectorEmpresas = data.empresas.map(
				(empresa: any) => {
					return {
						value: empresa.id,
						label: empresa.empresa_nombre,
					};
				}
			);
			setEmpresa(formatoSelectorEmpresas);
		});
	}, []);
	const handleSelectEmpresa = (selectEmpresa: any) => {
		setSelectEmpresa(selectEmpresa);
	};
	const handleEmailChange = (e: any) => {
		// setEmail(e.target.value);
		handleEmail(e);
		if (!emailTouched) setEmailTouched(true); // El usuario ha empezado a escribir
	};
	const handleDescripcionEmpresa = (e: any) => {
		if (e.target && e.target.value) {
			const value = e.target.value;

			// Establecer si el texto cumple con el límite mínimo de caracteres
			setCaracterLimitBoolMin(value.length < 60);

			// Establecer si el texto cumple con el límite máximo de caracteres
			setCaracterLimitBool(value.length === 255);

			// Actualizar la descripción de la empresa solo si el número de caracteres
			// es mayor o igual a 60 y menor o igual a 255
			if (value.length >= 60 && value.length < 255) {
				setDescripcionEmpresa(value);
			} else {
				// En caso de no cumplir con el rango de caracteres, se puede optar por no hacer nada
				// o establecer la descripción en un valor predeterminado (ej: string vacío)
				setDescripcionEmpresa("");
			}
		}
	};

	const [text, setText] = useState("");

	// Esta función actualiza el estado y se activa cada vez que el texto cambia.
	const handleChange = (e: any) => {
		handleDescripcionEmpresa(e);
		setText(e.target.value);
	};
	const handleEmail = (e: any) => {
		const emailInput = e.target.value.toLowerCase();
		const regex_email =
			/^[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/gm;
		if (
			emailInput == "" ||
			emailInput == null ||
			emailInput == undefined ||
			emailInput == " "
		) {
			setEmailValidation(false);
		} else {
			if (regex_email.test(emailInput)) {
				setEmailValidation(true);
				setEmail(emailInput);
			} else {
				setEmailValidation(false);
			}
		}
	};

	const guardarDatosEmpresa = () => {
		const datosEmpresa = {
			empresa: selectEmpresa,
			descripcion: descripcionEmpresa,
			email: email,
		};
		if (
			selectEmpresa != null &&
			descripcionEmpresa != "" &&
			emailValidation
		) {
			// guardar los datos en localstorage
			localStorage.setItem("datosEmpresa", JSON.stringify(datosEmpresa));
			cambiarComponente();
		} else {
			toast.error("Por favor, completa todos los campos");
		}
	};
	return (
		<>
			<div className="card bg-base-100 shadow-xl w-96 md:w-3/4 lg:w-3/4 animate__animated animate__fadeInDown">
				<div className="card-body">
					<h2 className="card-title">Selecciona tu empresa</h2>
					<Select options={empresa} onChange={handleSelectEmpresa} />
					<textarea
						maxLength={255}
						minLength={60}
						className="textarea textarea-bordered"
						name=""
						id=""
						cols={20}
						rows={5}
						placeholder="Descripción de la empresa"
						onChange={handleChange}
					></textarea>
					<div className="text-center">
						{caracterLimitBool ? (
							<p className="text-red-500">
								Solo se permiten 255 caracteres
							</p>
						) : (
							<p></p>
						)}
						{caracterLimitBoolMin ? (
							<p className="text-red-500">
								Se requieren al menos 60 caracteres
							</p>
						) : (
							<p></p>
						)}
					</div>
					<div>{text.length}/255</div>
					<input
						className="input input-bordered "
						type="mail"
						name="email"
						placeholder="Correo electrónico"
						onChange={handleEmailChange}
					/>

					{emailTouched &&
						(emailValidation ? (
							<div className="alert alert-success">
								<svg
									xmlns="http://www.w3.org/2000/svg"
									className="stroke-current shrink-0 h-6 w-6"
									fill="none"
									viewBox="0 0 24 24"
								>
									<path
										strokeLinecap="round"
										strokeLinejoin="round"
										strokeWidth="2"
										d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
									/>
								</svg>
								<span>Correo valido</span>
							</div>
						) : (
							<div className="alert alert-error">
								<svg
									xmlns="http://www.w3.org/2000/svg"
									className="stroke-current shrink-0 h-6 w-6"
									fill="none"
									viewBox="0 0 24 24"
								>
									<path
										strokeLinecap="round"
										strokeLinejoin="round"
										strokeWidth="2"
										d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
									/>
								</svg>
								<span>¡Ups! Ingresa un correo valido.</span>
							</div>
						))}

					<div className="card-actions justify-center">
						<button
							onClick={guardarDatosEmpresa}
							className="btn btn-primary rounded-full"
						>
							Siguiente
						</button>
					</div>
				</div>
			</div>

			{/* <div>
            <h1>Empresa</h1>
            <Select 
                options={empresa} 
                onChange={handleSelectEmpresa}
            />
            
            <textarea name="" id="" 
                cols={30} 
                rows={10} 
                placeholder="Descripción de la empresa"
                onChange={handleDescripcionEmpresa}
                ></textarea>
            <input type="mail" name='email' placeholder='Correo electronico' onChange={handleEmail}/>
            {emailValidation ? <p>Correo valido</p> : <p>Correo invalido</p>}
            <button onClick={guardarDatosEmpresa} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Siguiente</button>
        </div> */}
		</>
	);
};

export default CardEmpresa;