/* eslint-disable @typescript-eslint/ban-ts-comment */
import { CSSProperties, HTMLProps } from "react";
import classNames from "classnames";
import {
  MediaControlBar,
  MediaController,
  MediaFullscreenButton,
  MediaMuteButton,
  MediaPipButton,
  MediaPlayButton,
  MediaTimeRange,
  MediaVolumeRange,
  MediaCastButton,
  MediaLiveButton,
  MediaRenditionMenu,
  MediaRenditionMenuButton,
  MediaPosterImage,
  MediaTimeDisplay,
  MediaPlaybackRateButton,
} from "media-chrome/react";
import "hls-video-element";
import { StreamState } from "@/const";
import Nip94Player from "./n94-player";
import { NostrLink } from "@snort/system";

type VideoPlayerProps = {
  title?: string;
  status?: StreamState;
  stream?: string;
  poster?: string;
  muted?: boolean;
  link: NostrLink;
} & HTMLProps<HTMLVideoElement>;

export default function LiveVideoPlayer({ title, stream, status, poster, link, ...props }: VideoPlayerProps) {
  function innerPlayer() {
    if (stream === "nip94") {
      return <Nip94Player link={link} />;
    }
    {
      /* @ts-ignore Web Componenet */
    }
    return <hls-video {...props} slot="media" src={stream} playsInline={true} autoPlay={true} />;
  }
  return (
    <MediaController
      className={classNames(props.className, "h-inherit aspect-video w-full")}
      style={
        {
          "--media-secondary-color": "var(--primary)",
          "--media-control-hover-background": "color-mix(in srgb, var(--primary) 80%, transparent)",
        } as CSSProperties
      }>
      <div slot="top-chrome" className="py-1 text-center w-full text-2xl bg-primary">
        {title}
      </div>
      {innerPlayer()}
      <MediaRenditionMenu hidden anchor="auto" />
      {poster && <MediaPosterImage slot="poster" src={poster} />}
      <MediaControlBar>
        <MediaPlayButton />
        {status === StreamState.Live && <MediaLiveButton />}
        {status === StreamState.Ended && <MediaPlaybackRateButton />}
        <MediaTimeRange />
        {status === StreamState.Ended && <MediaTimeDisplay showduration={true} />}
        <MediaMuteButton />
        <MediaVolumeRange />
        {status === StreamState.Live && <MediaRenditionMenuButton />}
        <MediaPipButton />
        <MediaCastButton />
        <MediaFullscreenButton />
      </MediaControlBar>
    </MediaController>
  );
}
