import './ScreenShot.css';
import { ScreenShotLogic } from './ScreenShot.js';
import { useTouchEvents } from './TouchEvent.js';
import { useInputEvents } from './InputEvent.js';
import { useRef } from 'react';

function ScreenShot() {
  const { imageSrc, notifyImageLoaded, currentDevice } = ScreenShotLogic();
  const imageRef = useRef(null);
  const { handleMouseDown, handleMouseMove, handleMouseUp, handleMouseLeave } = useTouchEvents(currentDevice, imageRef);
  
  // 启用键盘输入（当设备连接时自动启用）
  useInputEvents(currentDevice, !!currentDevice);

  return (
    <div className="ScreenShot-container">
      {!currentDevice && (
        <div className="screenshot-frame">
          <div className="screenshot-placeholder">等待预览...</div>
        </div>
      )}
      {currentDevice && (
        <div 
          className="screenshot-frame filled"
          onMouseDown={handleMouseDown}
          onMouseMove={handleMouseMove}
          onMouseUp={handleMouseUp}
          onMouseLeave={handleMouseLeave}
        >
          {imageSrc ? (
            <img
              ref={imageRef}
              src={imageSrc}
              alt="设备截屏"
              onLoad={notifyImageLoaded}
              className="screenshot-img"
              draggable={false}
            />
          ) : (
            <div className="screenshot-placeholder">加载中...</div>
          )}
        </div>
      )}
    </div>
  );
}

export default ScreenShot;
