import React, { useEffect, useState } from 'react'

import EditUser from './EditUser'

import AddUser from './AddUser'
import './UserList.css'
import axios from 'axios'

export default function UserList() {

const [users,setUsers]=useState([]);
const [AddModalShow, setAddModalShow] = useState(false);
const [editModalShow, setEditModalShow] = useState(false);
const [editUser, setEditUser] = useState(null);
const pegaUsuarios = async() => {
try {
const resposta = await axios.get('http://localhost:30000/usuarios')
setUsers(resposta.data);

} catch (error) {
console.log(error)
}
console.log(users)
}

const criaUsuarios = async(novoUsuario)=>{

try {
await axios.post('http://localhost:30000/usuarios',
novoUsuario);
pegaUsuarios();
} catch (erros) {

console.log(erros)
}
}

const deletarUsuarios = async (userId) => {

const respostaConfirm=window.confirm("Voce quer realmente deletar esse
usuario?");
if(respostaConfirm){
try {
await axios.delete(`http://localhost:30000/usuarios/${userId}`)
pegaUsuarios();
} catch (erros) {

}
}
}

const auxiliarEdicao = (user) => {

setEditUser(user);
setEditModalShow(true);
}

const atualizaUsuario = async(atualizaUsuario)=>{

try {
await axios.put(`http://localhost:30000/usuarios/${atualizaUsuario.id}`)
} catch (erros) {
console.log(erros);
}
}
 useEffect(()=>{
pegaUsuarios();
})
return (
<div>
<h1>Lista de usuarios</h1>
<button className='btn btn-primary mb-2' onClick={()=>setAddModalShow(true)}>
Adicionar usuario
</button>

<table>
<thead>
<tr>
<th>Nome</th>
<th>Email</th>
<th>Ações</th>
</tr>
</thead>
<tbody>
{
users.map((user) => {
return(
<tr>
<td>{user.name}</td>
<td>{user.email}</td>
<td>
<button onClick={()=>auxiliarEdicao(user)}>Atualizar</button>
<button onClick={()=>deletarUsuarios(user.id)}>deletar</button>
</td>
</tr>
)
})
}

</tbody>
</table>

{
AddModalShow && (
<AddUser
handleClose={()=>setAddModalShow(false)}
AddUser={criaUsuarios}

/>
)
}

{
editModalShow && (
<EditUser
user={editUser}
handleClose={()=>setEditModalShow(false)}
atualizaUsuario={atualizaUsuario}
pegaUsuarios={pegaUsuarios}
/>
)
}
 </div>
)
}