import React, { useRef, useCallback } from 'react'
import styles from './index.module.scss'
import 'media-chrome'
import { baseOssUrl } from '@/utils/http'
function Zvideo({ src, objFit = 'fill' ,style}: { src: string; objFit?: string,style?: React.CSSProperties }) {
  const videoRef = useRef<HTMLVideoElement>(null)

  const handleTogglePlay = useCallback(() => {
    const video = videoRef.current
    if (!video) return
    if (video.paused) {
      video.play()
    } else {
      video.pause()
    }
  }, [])

  return (
    <div
      className={styles.Zvideo}
      style={style}
      onKeyDown={(e) => { if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); handleTogglePlay() } }}
      role="button"
      tabIndex={0}
    >
      <media-controller class='custom-media-controller' gesturesdisabled={true}>
        <video
          ref={videoRef}
          slot='media'
          src={baseOssUrl + src}
          className='modal-video'
          style={{ objectFit: objFit as any }}
          onClick={(e) => {
            e.stopPropagation()
            handleTogglePlay()
          }}
        ></video>
        <media-control-bar>
          <media-play-button></media-play-button>
          <div className='progress'>
            <media-time-range></media-time-range>
          </div>
          <div className='time'>
            <media-time-display></media-time-display>/
            <media-duration-display></media-duration-display>
          </div>
        </media-control-bar>
      </media-controller>
    </div>
  )
}

const MemoZvideo = React.memo(Zvideo)

export default MemoZvideo