import { HotelProvider, useHotel } from "./context/HotelContext";
import RoomWidget from "./widget/roomWidget"
import ChatWidget from "./widget/chatWidget"
import InventoryWidget from "./widget/inventoryWidget";
import { useEffect, useState } from "react";

import "./MainApp.css"

import AdminWidget from "./widget/adminWidget";

export default function MainAppWrapper({resClientId}) {
const accessToken = localStorage.getItem("access_tokens");



  return (
    <HotelProvider accessToken={accessToken} resClientId={resClientId}>
      <MainApp />
    </HotelProvider>
  );
}

function MainApp() {
  const accessToken = localStorage.getItem("access_tokens");
  const VIEW = {
  ROOMS: "rooms",
  INVENTORY: "inventory",
  ADMIN: "admin",
};

  const { rooms } = useHotel();
  const { conversations } = useHotel();
  const { users } = useHotel();
  const { items } = useHotel();

  const [view, setView] = useState(VIEW.ROOMS)

  return (
    <div>
      <div className="toolbar">
        <button className="toolbutton" onClick={() => setView(VIEW.ROOMS)}>Rooms</button>
        <button className="toolbutton" onClick={() => setView(VIEW.INVENTORY)}>Inventory</button>
      </div>

      <section className="main">
        {view === VIEW.ROOMS && <RoomWidget />}
        {view === VIEW.INVENTORY && <InventoryWidget />}
        <ChatWidget convlist={conversations} />    
      </section>
    </div>
  );

}