import { h } from "preact";
import { useState } from "preact/hooks";



function UserList({userlist}) {
    const [list, setuserlist] = useState(userlist);

    const deleteUser=(user)=>{
        let temp = [...list];
        temp.splice(temp.indexOf(user),1);
        setuserlist(temp);
    }
    const editUser=(user)=>{
        alert(`edit: ${user.uid}`);
    }
    const displayUser=(user)=>{
        return (
            <div key={`user${user.line}`} class="user-list-item">
                <div class="user-attributes">
                    <span><b>UID:</b> {user.uid}</span> <span>(<b>{user.enabled?'Aktiv':'Inaktiv'}</b>)</span><br />
                    <span><b>Vorname:</b> {user.first_name}</span><br />
                    <span><b>Nachname:</b> {user.last_name}</span><br />
                    <span><b>RFID:</b> {user.rfid_uid}</span>
                    <span><b>PIN:</b> {user.user_pin}</span>
                </div>
                <div class="btn-group">
                    <button class="btn-trash" onClick={()=>deleteUser(user)}>Löschen</button>
                    <button class="btn-edit" onClick={()=>editUser(user)}>Bearbeiten</button>
                </div>
            </div>);
    }
    

        return (
            <>
            {list&&list.map((user)=>displayUser(user))}
            </>
        );
    
}
export default UserList