import { api } from "~/utils/api"; 
import { useState } from "react";


const Devices: React.FC = (props) => {
    const sessionData = props.sessionData
    const [newDevice, setNewDevice] = useState("");
    const addDevice = api.device.addDevice.useMutation();
    const device = api.device.getAll.useQuery();
  
  
    
  
    return (
      <div className="flex flex-col items-center justify-center gap-4">
        <p className="text-center text-2xl text-white">
        </p>
        <h2 className="py-4 text-2xl font-bold text-white">
          Devices
        </h2>
        <div className="flex flex-col items-center justify-center gap-4">
          {
            !device.data ? "Loading tRPC query..."  
            : 
            device.data.map((device) => (
              <div className="flex flex-col items-center justify-center gap-4">
                <p className="text-xl font-bold text-white">{device.name}</p>
              </div>
            ))
          }
        </div>
        <div className="flex flex-col items-center justify-center gap-4">
          <h2 className="py-4 text-2xl font-bold text-white">Create Device</h2>
          <form
            className="flex gap-2"
            onSubmit={(event) => {
              event.preventDefault();
              addDevice.mutate({
                name: newDevice
              });
              setNewDevice("");
            }}
          >
            <input
              type="text"
              className="rounded-md border-2 border-zinc-800 bg-neutral-900 px-4 py-2 focus:outline-none"
              placeholder="Your message..."
              minLength={2}
              maxLength={100}
              value={newDevice}
              onChange={(event) => setNewDevice(event.target.value)}
            />
            <button
              type="submit"
              className="rounded-md border-2 border-zinc-800 p-2 focus:outline-none"
            >
              Submit
            </button>
          </form>
        </div>
      </div>
    );
  };

export default Devices;