import React from "react"

import { cn } from "../../design-lib/utils"

interface VideoProps {
  autoplay?: boolean
  autopause?: boolean
  muted?: boolean
  loop?: boolean
  url: string
  cover: string
  time?: boolean
  progressBar?: boolean
  overlay?: boolean
  muteButton?: boolean
  fullscreenButton?: boolean
  quality?: "auto" | "720p" | "1080p" | "540p"
  playButton?: boolean
  theme?: "light" | "dark"
  className?: string
  hidecontrols?: boolean
}

const Video: React.FC<VideoProps> = ({
  autoplay = false,
  autopause = false,
  muted = false,
  loop = true,
  url = "",
  cover = "",
  time = true,
  progressBar = true,
  overlay = true,
  muteButton = true,
  fullscreenButton = true,
  quality = "auto",
  playButton = true,
  theme = "light",
  className,
  hidecontrols = false,
}) => {
  const withControlHidden = (control: boolean) => {
    if (hidecontrols) {
      return false
    }
    return control
  }

  const iframeSrc = `https://onelineplayer.com/player.html?autoplay=${autoplay}&autopause=${autopause}&muted=${
    autoplay ? true : muted
  }&loop=${loop}&url=${encodeURIComponent(url)}&poster=${encodeURIComponent(
    cover
  )}&time=${withControlHidden(time)}&progressBar=${withControlHidden(
    progressBar
  )}&overlay=${withControlHidden(overlay)}&muteButton=${withControlHidden(
    muteButton
  )}&fullscreenButton=${withControlHidden(
    fullscreenButton
  )}&style=${theme}&quality=${quality}&playButton=${withControlHidden(
    playButton
  )}`

  return (
    <div
      className={"aspect-h-9 aspect-w-16 relative overflow-hidden rounded-md  "}
    >
      <iframe
        className={cn(
          "absolute inset-0 h-full w-full rounded-md border ",
          className
        )}
        allow="autoplay;fullscreen"
        src={iframeSrc}
      ></iframe>
    </div>
  )
}

export default Video