import { forwardRef } from 'react'

import type { Props } from './hooks'
import { useVideoPlayer } from './hooks'
import { Video } from './styled'

export const VideoPlayer = forwardRef<HTMLVideoElement, Props>((props: Props, ref) => {
  const {
    className,
    crossOrigin,
    height,
    hidden,
    muted,
    onEnded,
    onError,
    onPause,
    src,
    width,
  } = props
  const {
    handleDurationChange,
    handleLoadedChange,
    handlePlayedChange,
    handleReady,
    videoRef,
  } = useVideoPlayer({ ...props, ref })
  return (
    <Video
      playsInline
      className={className}
      width={width}
      height={height}
      hidden={hidden}
      ref={videoRef}
      src={src}
      muted={muted}
      onCanPlayThrough={handleReady}
      onTimeUpdate={handlePlayedChange}
      onProgress={handleLoadedChange}
      onEnded={onEnded}
      onDurationChange={handleDurationChange}
      onPause={onPause}
      onError={onError}
      crossOrigin={crossOrigin}
    />
  )
})
