import React from "react";
import Swal from 'sweetalert2'
export default function Singup({ thisAdmin, usuarioAeditar, setUsuarioAeditar, isExpanded, toggleExpansion, actualizarUsuaruio }) {
    console.log("EditarTemporal", thisAdmin)
    function handleInputChange(e) {
        setUsuarioAeditar({
            ...usuarioAeditar,
            [e.target.name]: e.target.value,
        });
    }

    async function handleSubmit(e) {
        // Acá lo que tengo que hacer es traer los datos del usuario al que le hice click
        e.preventDefault();         //No queremos que el formulario haga refres de la  pagina
        toggleExpansion(!isExpanded)
        try {
            await actualizarUsuaruio(usuarioAeditar)
        } catch (error) {
            Swal.fire({
                icon: 'error',
                title: 'Oops...',
                text: error?.response?.data?.message,
            })
        }
    }

    function cancelarEdicion(e) {
        toggleExpansion(!isExpanded)
        setUsuarioAeditar({
            rfid: "",
            dni: "",
            name: "",
            telefono: "",
            email: "",
            sexo: "",
            date: "",
            admin: thisAdmin
        });
    }

    return (
        <React.StrictMode>

            <div className={`${isExpanded ? `block` : `hidden`
                } flex flex-row w-full content-center justify-center`}>
                <form
                    className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 flex flex-col my-2"
                    onSubmit={handleSubmit}>
                    <h2 className="pb-2 text-center text-gray-700 text-xl">Agregar usuario para la tarjeta <b>{usuarioAeditar.rfid}</b></h2>

                    <div className="-mx-3 md:flex mb-6">
                        <div className="md:w-1/2 px-3 mb-6 md:mb-0">
                            <label className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
                                Nombre completo
              </label>
                            <input
                                onChange={handleInputChange}
                                value={usuarioAeditar.name}
                                className="appearance-none block w-full bg-grey-lighter text-gray-700 border border-red rounded py-3 px-4 mb-3 focus:border-gray-700"
                                id="grid-name"
                                name="name"
                                type="text"
                                placeholder="Nombre y apellido" />
                        </div>
                        <div className="md:w-1/2 px-3">
                            <label className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
                                DNI
              </label>
                            <input
                                onChange={handleInputChange}
                                value={usuarioAeditar.dni}
                                className="appearance-none block w-full bg-grey-lighter text-gray-700 border border-grey-lighter rounded py-3 px-4 focus:border-gray-700"
                                id="grid-din"
                                name="dni"
                                type="text"
                                placeholder="37245063" />
                        </div>
                    </div>

                    <div className="-mx-3 md:flex mb-6">
                        <div className="md:w-1/2 px-3 mb-6 md:mb-0">
                            <label className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
                                Teléfono
              </label>
                            <input
                                onChange={handleInputChange}
                                value={usuarioAeditar.telefono}
                                className="appearance-none block w-full bg-grey-lighter text-gray-700 border border-red rounded py-3 px-4 mb-3 focus:border-gray-700"
                                id="grid-telefono"
                                name="telefono"
                                type="text"
                                placeholder="XXXXXXXXXX" />

                        </div>
                        <div className="md:w-1/2 px-3">
                            <label className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
                                Email
              </label>
                            <input
                                onChange={handleInputChange}
                                value={usuarioAeditar.email}
                                className="appearance-none block w-full bg-grey-lighter text-gray-700 border border-grey-lighter rounded py-3 px-4 focus:border-gray-700"
                                id="grid-email"
                                name="email"
                                type="text"
                                placeholder="tu@email.com" />
                        </div>
                    </div>

                    <div className="-mx-3 md:flex mb-6">
                        <div className="md:w-1/3 px-3 mb-6 md:mb-0">
                            <label className="block appearance-none uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
                                Fecha de nacimiento
              </label>
                            <input
                                onChange={handleInputChange}
                                value={usuarioAeditar.date}
                                className="appearance-none block w-full bg-grey-lighter text-gray-700 border border-red rounded py-3 px-4 mb-3 focus:border-gray-700"
                                id="grid-date"
                                type="date"
                                name="date"
                                placeholder="Nombre Apellido" />
                        </div>
                        <div className="md:w-1/3 px-3">
                            <label className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
                                Sexo
              </label>
                            <div className="relative">
                                <select
                                    onChange={handleInputChange}
                                    value={usuarioAeditar.sexo}
                                    className="block appearance-none w-full bg-white border border-grey-lighter text-gray-700 py-3 px-4 pr-8 rounded focus:border-gray-700"
                                    id="grid-sexo"
                                    name="sexo"
                                >
                                    <option className="appearance-none text-gray-700">Selecciona</option>
                                    <option className="appearance-none text-gray-700">Masculino</option>
                                    <option className="appearance-none text-gray-700">Femenino</option>
                                </select>
                            </div>
                        </div>
                        <div className="md:w-1/3 px-3">
                            <label className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
                                Grupo de Trabajo
              </label>
                            <input
                                onChange={handleInputChange}
                                value={usuarioAeditar.grupo}
                                className="appearance-none block w-full bg-grey-lighter text-gray-700 border border-grey-lighter rounded py-3 px-4 focus:border-gray-700"
                                id="grid-grupo"
                                name="grupo"
                                type="text"
                                placeholder="90210" />
                        </div>
                    </div>
                    <div className="-mx-3 md:flex mb-6 self-center justify-center">
                        <button
                            className="mb-2 self-center text-sm px-2 py-2 mx-2 leading-none font-bold border rounded text-gray-700 border-gray-700 hover:bg-gray-700 hover:text-white "
                            type="submit"
                        >
                            Guardar
              </button>
                        <button
                            className="mb-2 self-center text-sm px-2 py-2 mx-2 leading-none font-bold border rounded text-red-700  border-red-700 hover:bg-red-700 hover:text-white hover:bg-red-700"
                            type="button"
                            name="cancelarEdicion"
                            id="borrar"
                            onClick={cancelarEdicion}
                        >
                            Cancelar
              </button>
                    </div>






                </form>
            </div>

        </React.StrictMode>
    );
}