import React, { useState, useEffect, useCallback, useMemo } from 'react';
import VideoPlayer from '@/pages/Home_v_2504/components/VideoPlayer';
import styles from './index.less';
import { ChildrenModalMethods } from '@/pages/GlobalModalServices/type';

interface SingleVideoModalProps {
  title?: string;
  deviceId: string;
  videoTitle?: string;
  videoType?: '1' | '2' | '3' | '4'; // 1-农贸市场，2-背街小巷，3-重点区域，4-地铁口
  modalDispatch?: ChildrenModalMethods;
}

/**
 * 单视频详情弹窗
 * 用于在点击视频后显示更大尺寸的视频播放
 */
const SingleVideoModal: React.FC<SingleVideoModalProps> = ({ 
  title, 
  deviceId,
  videoTitle = '监控视频',
  videoType = '3',
  modalDispatch 
}) => {
  // 播放器初始化状态
  const [playerInitialized, setPlayerInitialized] = useState<boolean>(false);
  
  // 处理播放器初始化完成
  const handlePlayerInitialized = (success: boolean) => {
    if (success) {
      setPlayerInitialized(true);
      console.log('单视频播放器初始化成功');
    } else {
      console.error('单视频播放器初始化失败');
    }
  };

  
  // 计算当前窗口比例，用于调整播放器大小
  const calculateRatio = useCallback(() => {
    // 默认设计尺寸
    const designWidth = 3840;
    const designHeight = 1080;
    
    // 获取当前窗口尺寸
    const currentWidth = window.innerWidth;
    const currentHeight = window.innerHeight;
    
    // 计算缩放比例
    const widthRatio = currentWidth / designWidth;
    const heightRatio = currentHeight / designHeight;
    const scaleRatio = Math.min(widthRatio, heightRatio);
    
    // 返回最小的比例值，确保不超出视口
    return scaleRatio;
  }, []);
  
  // 当窗口大小变化时更新ratio
  const [ratio, setRatio] = useState<number>(1);
  
  useEffect(() => {
    const updateRatio = () => {
      setRatio(calculateRatio());
    };
    
    // 初始更新
    updateRatio();
    
    // 监听窗口大小变化
    window.addEventListener('resize', updateRatio);
    return () => {
      window.removeEventListener('resize', updateRatio);
    };
  }, [calculateRatio]);

  
  // 根据布局模式获取视频显示数量和尺寸
  const getLayoutConfig = useMemo(() => {
    // 视频播放器尺寸
    const videoWidth = 1182;
    const videoHeight = 764;
    let isDebug = false;
    let debugRatio = isDebug ? 0.9 : 1;
    
    return {
      width: Math.floor(videoWidth * ratio * debugRatio) ,
      height: Math.floor(videoHeight * ratio),
      // horizontalGap: 10,
      // verticalGap: 10,
      // containerClass: styles.nineScreenLayout
    };
  }, [ratio]);


  // 播放器ID
  const playerId = 'playWnd_single_video';

  return (
    <div className={styles.singleVideoContainer}>
      <div className={styles.videoWrapper}>
        <div className={styles.videoTitle}>{videoTitle}</div>
        <div className={styles.videoPlayerContainer} id={playerId}>
          <VideoPlayer
            deviceId={deviceId}
            playerId={playerId}
            visible={true}
            width={getLayoutConfig.width}
            height={getLayoutConfig.height}
            // width={videoWidth}
            // height={videoHeight}
            onInitialized={handlePlayerInitialized}
            onError={(err) => console.error('视频播放错误:', err)}
          />
        </div>
      </div>
    </div>
  );
};

export default SingleVideoModal; 