import { useIsFocused } from '@react-navigation/native'
import { memo, useEffect, useState } from 'react'
import Svg, { Circle, Defs, Pattern, Rect } from 'react-native-svg'

import { Block, VideoBox } from '@/@share/components'
import { screenHeight, screenWidth } from '@/utils'

const BACKGROUND_VIDEOS = [
  'https://cdn.roasmax.cn/material/f6986370d3eb4d07a839f2b8d2803e6b.webp',
  'https://cdn.roasmax.cn/material/afdbd7aefe7546329519bbf4e5e0e22c.webp',
  'https://cdn.roasmax.cn/material/e5d769a8cc88441eae9d317dd9c0ecc8.webp',
]

type BannerProps = { bgVideo?: string }
const BannerSection = memo<BannerProps>(function Banner({ bgVideo }) {
  const [bgUrl, setBgurl] = useState(() => BACKGROUND_VIDEOS[Math.floor(Math.random() * BACKGROUND_VIDEOS.length)])

  useEffect(() => {
    if (!bgVideo) return
    setBgurl(bgVideo)
  }, [bgVideo])

  const isFocused = useIsFocused()
  if (!isFocused) return null

  return (
    <Block className="absolute inset-0 z-0 overflow-hidden">
      {/* 使用较小的分辨率降低内存占用 */}
      <VideoBox style={{ width: screenWidth, height: screenHeight }} url={bgUrl} width={360} />

      <Block className="absolute inset-0">
        <Svg height="100%" preserveAspectRatio="none" viewBox="0 0 400 800" width="100%">
          <Defs>
            <Pattern height="15" id="dots" patternUnits="userSpaceOnUse" width="15" x="0" y="0">
              <Circle cx="2" cy="2" fill="#ffff00" opacity="0.05" r="2" />
            </Pattern>
          </Defs>
          <Rect fill="url(#dots)" height="100%" width="100%" x="0" y="0" />
        </Svg>
      </Block>
    </Block>
  )
})

export default BannerSection