import "./RoomWidget.css";
import { useHotel } from "../HotelContext";
import { useState } from "react";
export default function RoomWidget({ roomlist }) {
    
  return (
    <div className="grid">
      {roomlist.map(room => (
        <RoomCard
          key={room.id}
          id = {room.id}
          number={room.number}
          status={room.status}
        />
      ))}
    </div>
  );
}

function RoomCard({ number, status ,id}) {
  
  const { updateRoomStatus } = useHotel();
  const [editing, setEditing] = useState(false);
  const [value, SetValue] = useState(status);

  function submit() {
    updateRoomStatus(id,value);
    setEditing(false);
  }

  return (
      <div className="card">
      <h3>Room {number}</h3>
      <h4>Id {id}</h4>

      {!editing ?(
        <p onClick={() => setEditing(true)} style={{ cursor: "pointer" }}>
          Status: {status}
        </p>
      ): (
        <div>
          <input
          type="text"
          value={value}
          autoFocus
          onChange={e => SetValue(e.target.value)}
          onKeyDown={e => e.key === "Enter" && submit()}
          />
        </div>
      )}


      <div className="actions">
        <button onClick={() => updateRoomStatus(id, "clean")}>
          Mark Clean
        </button>

        <button onClick={() => updateRoomStatus(id, "dirty")}>
          Mark Dirty
        </button>
      </div>

      </div>
  );
}

//export default roomWidget