import { memo, useEffect, useState } from 'react'
import { ViewStyle } from 'react-native'
import Video from 'react-native-video'

type Props = {
  url?: string
  poster?: string
  style?: ViewStyle
} & React.ComponentProps<typeof Video>

const VideoBox = ({ url, poster, style, ...videoProps }: Props) => {
  const [paused, setPaused] = useState(true)

  useEffect(() => {
    console.log('url--------', url);

    setPaused(!Boolean(url))
  }, [url])

  return (
    // 当 url 变化时通过 key 强制重载，确保自动播放生效
    <Video
      key={url ?? 'no-url'}
      source={{ uri: url }}
      poster={poster}
      repeat
      viewType={0}
      controls={false}
      resizeMode="cover"
      volume={0}
      muted
      paused={paused}
      style={style as any}
      {...videoProps}
    />
  )
}

export default memo(VideoBox)