import { useState, useEffect } from "react";

import { useHotel } from "../HotelContext";


export default function AdminWidget() {

    const [username, setUserName] = useState("");
    const [password, setPassword] = useState("");
    
    const [hotel_ids, setHotelIds] = useState([]);
    const [display_name, setDisplayName] = useState("");
    
    const [allHotelsList, setAllHotelsList] = useState([]);
    const [addHotelSelected, setAddHotelSelected] = useState([])
    const [addHotelUserId, setAddHotelUserId] = useState("0");

    const { registerUser, getHotelList, addHotelUser} = useHotel();

    const createUser = (username, password, hotel_ids, display_name) => {
        registerUser(username, password, hotel_ids, display_name);
    }
    //console.log(addHotelSelected);
    
    useEffect(() => {
        
        const loadHotels = async () => {
            const hotels = await getHotelList();
            setAllHotelsList(hotels);
        }

        loadHotels();
        console.log("addhotel collected : " + allHotelsList)
    }, [] );
    
    const toggleHotel = (id) => {
    setAddHotelSelected(prev =>
            prev.includes(id)
            ? prev.filter(hotelId => hotelId !== id)
            : [...prev, id]
        );
    };

    function submit() {
        
        addHotelUser(addHotelSelected, addHotelUserId );
        setAddHotelUserId("");
    };


    return(

        <div className="adminWidget">
            <div className="CreateUserDiv">
                <input 
                value={username}
                onChange={e => setUserName(e.target.value)}
                placeholder="NomDeCompte"
                type="text" />

                <input 
                value={password}
                onChange={e => setPassword(e.target.value)}
                placeholder="Mot de Passe"
                type="text" />

                <input 
                value={display_name}
                onChange={e => setDisplayName(e.target.value)}
                placeholder="Nome afficher"
                type="text" />
                
                <input 
                value={hotel_ids}
                onChange={e => setHotelIds(e.target.value.split(",").map(Number))}
                placeholder="hotels"
                type="text" />

                <button
                    onClick={() =>
                        registerUser(username, password, hotel_ids, display_name)
                    }
                >
                    Créer l'utilisateur
                </button>
            </div>

            <div className="addHotelUser">
                <div className="hotels">
                    {allHotelsList.map(hotel => (
                        <HotelCard
                        key={hotel.id}
                        id={hotel.id}
                        hotel_name={hotel.hotel_name}
                        checked={addHotelSelected.includes(hotel.id)}
                        onToggle={toggleHotel}
                        />                            
                    ))}
                </div>
                <input type="text" 
                    defaultValue={""}
                    value={addHotelUserId}
                    autoFocus
                    onChange={e => setAddHotelUserId(e.target.value)}
                    onKeyDown={e => e.key === "Enter" && submit() }
                />    
                <button onClick={() => addHotelUser(addHotelUserId ,addHotelSelected)}>send</button>

            </div>
 
        </div>
    )
}

function HotelCard({ id, hotel_name, checked, onToggle }) {
    return (
        <div className="hotelCard">
            <label>
                <input
                    type="checkbox"
                    checked={checked}
                    onChange={() => onToggle(id)}
                />
                <strong>{hotel_name}</strong> (id: {id})
            </label>
        </div>
    );
}