import { useAction, useQuery } from "convex/react";
import { useState } from "react";
import { api } from "../../convex/_generated/api";
import { Id } from "../../convex/_generated/dataModel";
import { ClipDetail } from "./ClipDetail";

export const Room = ({ roomId }: { roomId: Id<"rooms"> }) => {
  const clips = useQuery(api.clips.get, {
    roomId: roomId,
  });

  const [selectedClip, setSelectedClip] = useState<any>(null);

  const runGenerate = useAction(api.runGenerate.doSomething);
  return (
    <div className="h-full flex">
      <div className="flex-1 overflow-y-auto">
        <button
          className="bg-blue-500 hover:bg-blue-600 text-white p-2 rounded-md"
          onClick={() => runGenerate({ roomId: roomId })}
        >
          Generate (Test)
        </button>

        {clips?.map((clip) => {
          return (
            <div
              onClick={() => setSelectedClip(clip)}
              key={clip._id}
              className="flex items-center space-x-4"
            >
              {clip.image_url ? (
                <img
                  src={clip.image_url}
                  alt={clip.title}
                  className="w-8 h-12 object-cover rounded-sm"
                />
              ) : null}
              <div>
                {clip.title} - {clip.status}
                <div>{clip.user.name}</div>
              </div>
              {clip.audio_url ? <audio src={clip.audio_url} controls /> : null}
            </div>
          );
        })}
      </div>
      <div className="w-[300px] overflow-y-auto">
        {selectedClip ? <ClipDetail clip={selectedClip} /> : null}
      </div>
    </div>
  );
};