import * as seadn from "@opensea/seadn"
import { type VideoFormat } from "@opensea/ui-kit"
import React, { forwardRef } from "react"

type Props = React.DetailedHTMLProps<
  React.VideoHTMLAttributes<HTMLVideoElement>,
  HTMLVideoElement
> & {
  src: string
  format: VideoFormat
}

export const Video = forwardRef<HTMLVideoElement, Props>(function Video(
  { src, format, ...rest },
  ref,
) {
  return (
    <video {...rest} ref={ref}>
      <source
        src={seadn.originalURL(src)}
        type={`video/${getBrowserVideoMediaFormat(format)}`}
      />
    </video>
  )
})

// https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Containers#browser_compatibility
export function getBrowserVideoMediaFormat(
  format: VideoFormat,
): Exclude<VideoFormat, "mov"> {
  if (format === "mov" || format === "m4v") {
    return "mp4"
  }
  return format
}