import SmartForm from '@/components/SmartForm';

import { useAuth } from '@/hooks/useAuth';

import { useNavigate, Link, useParams } from 'react-router-dom';
import { SelectInput, TextInput, DatePicker, DropdownWithSearch, CheckInput } from
'@/components/Inputs';
import countries from '@/utils/countries';
import React, { useEffect, useState } from 'react';
import useFetchData from '@/hooks/useFetchData';
import useNotification from '@/hooks/useNotification';

import Spinner from '@/components/Spinner';

import AdminBackBar from '@/components/AdminBackBar';
import ImagePreview from '@/components/ImagePreview';

const NewUser = () => {

const [userData, setUserData] = useState(null);
const [loading, setLoading] = useState(true)
const { fetchData } = useFetchData()
const { userId } = useParams()
const navigate = useNavigate()
const { notify } = useNotification()

useEffect(() => {
if (userId) {
getUser();
} else {
setLoading(false)
}
}, [userId]);

const getUser = async () => {

const { data, error } = await fetchData(`/api/user/${userId}`);

if (data && data.user) {

setUserData(data.user);
} else {
notify({
type: "error",
message: "No existe un usuario con ese id"
})
}

setTimeout(() => {
setLoading(false);
}, 1500);
}

const handleUserSuccess = (data) => {

console.log(data)
}

const states = [
{ name: "No verificado", value: "noVerified" },
{ name: "Activo", value: "active" },
{ name: "Bloqueado", value: "blocked" },
]
 return (
<div className="flex flex-col items-center justify-center bg-gray-100 py-10
px-4">
<div className="flex flex-col w-full bg-gray-100 lg:w-3/4 rounded-xl p-
2 justify-center items-center">
<div className='flex flex-col gap-1'>
<div style={{ color: 'var(--text-color)' }} className="bg-white
p-8 rounded-lg shadow-lg max-w-md w-full border border-slate-600">

<SmartForm
url={`/api/user/${userId}`}
hasMultimedia={true}
data={userData}
validations={{
name: { function: (value) => value.length > 0,
message: 'El nombre es obligatorio' },
lastname: { function: (value) => value.length > 0,
message: 'El apellido es obligatorio' },
birthDate: { function: (value) => !!value, message:
'La fecha de nacimiento es obligatoria' },
gender: { function: (value) => ['Masculino',
'Femenino', 'Otro'].includes(value), message: 'El género es obligatorio' },
nationality: { function: (value) => value.length >
0, message: 'La nacionalidad es obligatoria' },
phone: { function: (value) => !value || /^\d+
$/.test(value), message: 'El teléfono debe ser numérico' },
dni: { function: (value) => value.length > 0,
message: 'El DNI es obligatorio' },
email: { function: (value) => /\S+@\S+\.\
S+/.test(value), message: 'El correo es inválido' },
password: { function: (value) => value.length > 0,
message: 'La contraseña es obligatoria' },
}}
submitText={'Actualizar Usuario'}
onSuccess={(data) => handleUserSuccess(data)}
>
{({ formData, handleChange, saveFormData, errors }) =>
(
<>
<div className='flex gap-2'>
<TextInput
name="name"
label={<label className="block text-gray-
700 font-semibold mb-1">Nombre</label>}
type="text"
value={formData.name || ""}
onChange={handleChange}
error={errors.name}
placeholder="Nombre/s"
/>

<TextInput
name="lastname"
label={<label className="block text-gray-
700 font-semibold mb-1">Apellido</label>}
type="text"
value={formData.lastname || ""}
onChange={handleChange}
 error={errors.lastname}
placeholder="Apellido/s"
/>
</div>

<div className="grid grid-cols-1 md:grid-cols-2

gap-4">
<DatePicker
label={<label className="block text-gray-
700 font-semibold mb-1 mt-1 rounded-mg">Fecha de Nacimiento</label>}
value={
formData.birthDate && !isNaN(new
Date(formData.birthDate))
? new
Date(formData.birthDate).toISOString().split('T')[0]
: ''
}
onChange={handleChange}
/>

<SelectInput
options={['Masculino', 'Femenino', 'Otro']}
label={<label className="block text-gray-
700 font-semibold mb-1 text-base">Género</label>}
name="gender"
value={formData.gender || "Masculino"}
onChange={handleChange}
hasNull={false}
className={"border border-gray-300 rounded-
mg p-2.5"}
/>
</div>

<DropdownWithSearch
options={countries}
label={<label className="block text-gray-700
font-semibold mb-1 text-base">Nacionalidad</label>}
selectedValue={formData.nationality}
error={errors.nationality}
name={"country"}
onChange={(nationality) =>
saveFormData('nationality', nationality)}
placeholder="Argentina"
className={"border border-gray-300 rounded-lg
p-2.5"}
/>

<TextInput
name="dni"
label={<label className="block text-gray-700
font-semibold mb-1">DNI o Pasaporte</label>}
type="number"
value={formData.dni || ""}
onChange={handleChange}
error={errors.dni}
placeholder="40.213.433"
className={"border border-gray-300 rounded-md
p-3"}
/>
 <div>
<label className="block text-gray-700 font-
semibold mb-1">Email:</label>
<input
type="email"
name="email"
value={formData.email || ""}
onChange={handleChange}
placeholder="Ingrese su email"
className="w-full p-3 border border-gray-
300 rounded-lg focus:ring focus:ring-blue-200 bg-gray-50"
/>
{errors.email && <p className="text-red-500
text-sm">{errors.email}</p>}
</div>

<TextInput
name="cellphone"
label={<label className="block text-gray-700
font-semibold mb-1">Teléfono</label>}
type="tel"
value={formData.cellphone || ""}
onChange={handleChange}
error={errors.cellphone}
placeholder="+54 2945 123-456"
pattern="\+?\d{1,4}\s?\d{1,4}\s?\d{4,10}"
title="Debe ser un número válido de teléfono,
e.g., +54 2945 123-456"
/>

<SelectInput
label="Estado"
name="state"
value={formData.state || "noVerified"}
onChange={handleChange}
error={errors.state}
hasNull={false}
>
{states && states.map((state, index) => (
<option value={state.value} key={index}>
{state.name}
</option>
))}
</SelectInput>
</> )}
</SmartForm>
</div>

<div style={{ color: 'var(--text-color)' }} className="bg-white

p-8 rounded-lg shadow-lg max-w-md w-full border border-slate-600">
{/* CAMBIOS EN EL PERFIL*/}

<SmartForm
url={`/admin/user/${userData.id}/edit/userType`}
data={userData}
submitText={"Confirmar"}
onSuccess={(data) => handleUserSuccess(data)}
>
 {({ handleChange, formData, errors, saveFormData }) => (
<>
<SelectInput
options={['Comunidad', 'Estudiante', 'Medico',
'Superadmin', 'Admin']}
label={<label className="block text-gray-700 font-
semibold mb-1 text-base">Tipo de perfil</label>}
name="op"
value={formData.op}
onChange={handleChange}
hasNull={false}
className={"border border-gray-300 rounded-lg p-
2.5"}
/>

{/* Segun tipo de perfil */}

<>
{formData.op == "Estudiante" ? (
<>
<TextInput
value={formData.facultad}
onChange={handleChange}
name="facultad"
placeholder={"UNLP - Medicina"}
label="Facultad"
error={errors.facultad}
/>

<TextInput
value={formData.legajo}
onChange={handleChange}
name="legajo"
placeholder={"12345/44"}
label="Legajo de estudiante"
error={errors.legajo}
/>

<CheckInput
name="verified"
label="Verificado"
checked={formData.verified}
onChange={handleChange}
/>
</>
) : null}
</>

{/* Segun tipo de perfil */}

<>

{formData.op == "Medico" ? (
<>
<SelectInput
options={['Provincial', 'Nacional']}
label={"Tipo de matricula"}
name={"type"}
value={formData.type}
error={errors.type}
hasNull={false}
 onChange={handleChange}
/>

<TextInput
value={formData.matricula}
onChange={handleChange}
name="matricula"
placeholder={"213123112"}
label="Matricula"
error={errors.matricula}
/>

<CheckInput
name="verified"
label="Verificado"
checked={formData.verified}
onChange={handleChange}
/>
</>
) : null}
</>
</> )}
</SmartForm>
</div>
</div>
</div>
</div>

/*
<SmartForm>
<SelectInput
options={['Comunidad', 'Estudiante', 'Medico',
'Superadmin', 'Admin']}
label={<label className="block text-gray-700 font-
semibold mb-1 text-base">Tipo de perfil</label>}
name="op"
value={formData.op}
onChange={handleChange}
hasNull={false}
className={"border border-gray-300 rounded-lg p-
2.5"}
/>

Segun tipo de perfil

<>
{formData.op == "Estudiante" ? (
<>
<TextInput
value={formData.facultad}
onChange={handleChange}
name="facultad"
placeholder={"UNLP - Medicina"}
label="Facultad"
error={errors.facultad}
/>

<TextInput
 value={formData.legajo}
onChange={handleChange}
name="legajo"
placeholder={"12345/44"}
label="Legajo de estudiante"
error={errors.legajo}
/>
</>
) : null}
</>

{/* Segun tipo de perfil }

<>
{formData.op == "Medico" ? (
<>

<SelectInput
options={['Provincial',
'Nacional']}
label={"Tipo de matricula"}
name="type"
value={formData.type}
//error={errors.type}
onChange={handleChange}
/>

<TextInput
value={formData.matricula}
onChange={handleChange}
name="matricula"
placeholder={"213123112"}
label="Matricula"
error={errors.matricula}
/>

<CheckInput
name="verified"
label="Verificado"
checked={formData.verified}
onChange={handleChange}
/>
</>
) : null}
</>

<button
type="submit"
style={{ backgroundColor: 'var(--button-
bg)', color: 'var(--button-text)' }}
className="w-full py-2 px-6 rounded-md
text-white hover:bg-[#6d0d1d] bg-[#8e1826] hover:scale-105 hover:shadow-lg
transition-all font-bold text-lg"
onClick={handleSubmit}
>
Registrar usuario
</button>
</>
)}
</SmartForm>
 */
);
};

export default NewUser;