import { useEffect, useState, useRef } from 'react'
import { Image } from '@nutui/nutui-react-taro'
import { CmsAd } from "@/api/cms/cmsAd/model";
import { getCmsAd } from "@/api/cms/cmsAd";
import navTo from "@/utils/common";

const NaturalFullscreenBanner = () => {
  const [bannerData, setBannerData] = useState<CmsAd | null>(null)
  const [isLoading, setIsLoading] = useState(true)
  const containerRef = useRef<HTMLDivElement>(null)
  const imageRef = useRef<HTMLImageElement>(null)

  // 加载图片数据
  const loadBannerData = () => {
    setIsLoading(true)
    getCmsAd(447)
      .then(data => {
        setBannerData(data)
        setIsLoading(false)
      })
      .catch(error => {
        console.error('图片数据加载失败:', error)
        setIsLoading(false)
      })
  }

  // 处理图片加载完成后调整显示方式
  const handleImageLoad = () => {
    if (imageRef.current && containerRef.current) {
      // 获取图片原始宽高比
      const imgRatio = imageRef.current.naturalWidth / imageRef.current.naturalHeight;
      // 获取容器宽高比
      const containerRatio = containerRef.current.offsetWidth / containerRef.current.offsetHeight;

      // 根据比例差异微调显示方式
      if (imgRatio > containerRatio) {
        // 图片更宽，适当调整以显示更多垂直内容
        imageRef.current.style.objectPosition = 'center';
      } else {
        // 图片更高，适当调整以显示更多水平内容
        imageRef.current.style.objectPosition = 'center';
      }
    }
  }

  // 设置全屏尺寸
  useEffect(() => {
    const setFullscreenSize = () => {
      if (containerRef.current) {
        // 减去可能存在的导航栏高度，使显示更自然
        const windowHeight = window.innerHeight - 48; // 假设导航栏高度为48px
        const windowWidth = window.innerWidth;

        containerRef.current.style.height = `${windowHeight}px`;
        containerRef.current.style.width = `${windowWidth}px`;
      }
    };

    // 初始化尺寸
    setFullscreenSize();

    // 监听窗口大小变化
    const resizeHandler = () => setFullscreenSize();
    window.addEventListener('resize', resizeHandler);
    return () => window.removeEventListener('resize', resizeHandler);
  }, []);

  useEffect(() => {
    loadBannerData()
  }, [])

  if (isLoading) {
    return (
      <div ref={containerRef} className="flex items-center justify-center bg-gray-100">
        <span className="text-gray-500 text-sm">加载中...</span>
      </div>
    )
  }

  // 获取第一张图片，如果有
  const firstImage = bannerData?.imageList?.[0];

  if (!firstImage) {
    return (
      <div ref={containerRef} className="flex items-center justify-center bg-gray-100">
        <span className="text-gray-500 text-sm">暂无图片数据</span>
      </div>
    )
  }

  return (
    <div ref={containerRef} className="relative overflow-hidden bg-black">
      <Image
        ref={imageRef}
        className="absolute inset-0"
        src={firstImage.url}
        mode={'scaleToFill'}
        onClick={() => firstImage.path && navTo(firstImage.path)}
        lazyLoad={false}
        alt="全屏 banner 图"
        onLoad={handleImageLoad}
        style={{
          width: '100%',
          height: '100%',
          // 优先保持比例，只裁剪必要部分
          objectFit: 'cover',
          // 默认居中显示，保留图片主体内容
          objectPosition: 'center center'
        }}
      />
    </div>
  )
}

export default NaturalFullscreenBanner
