import MuxPlayer from "@mux/mux-player-react";
import { NextPage } from "next";
import { useState } from "react";

interface VideoPlayerProps {
  videoData: {
    id: string;
    createdAt: Date;
    updatedAt: Date;
    roomId: string;
    playbackId: string;
    streamKey: string;
    status?: string;
  };
  isLoading: boolean;
  playbackId: string;
}
const VideoPlayer: NextPage<VideoPlayerProps> = ({
  videoData,
  isLoading,
  playbackId,
}) => {
  const [error, setError] = useState<null | string>(null);
  console.log(
    videoData ? videoData.playbackId : "videoData is null",
    "videoData.playbackId"
  );
  if (!videoData || isLoading) {
    console.log("video data", videoData);
    console.log("isLoading", isLoading);
    return <div>loading...</div>;
  }

  return (
    <div className="flex flex-col items-center justify-center">
      {error && <div>Error: {error}</div>}

      {videoData !== undefined && playbackId ? (
        <MuxPlayer
          style={{ width: "100%" }}
          className=""
          playbackId={playbackId}
          metadata={{ player_name: "with-mux-video" }}
        />
      ) : videoData.playbackId === undefined ? (
        <div>
          <p>No video selected</p>
        </div>
      ) : (
        <div>
          <p>loading...(no url00</p>
        </div>
      )}
    </div>
  );
};
export default VideoPlayer;