import * as THREE from 'three';

export default function useSequenceFrameAnimate() {
  /**
   * 创建序列帧动画
   * @param {Object} options - 配置选项
   * @param {string} options.image - 图片路径
   * @param {number} options.width - 图片宽度
   * @param {number} options.height - 图片高度
   * @param {number} options.frame - 总帧数
   * @param {number} options.column - 列数
   * @param {number} options.row - 行数
   * @param {number} options.speed - 播放速度
   * @returns {THREE.Mesh} 序列帧网格对象
   */
  const createSequenceFrame = (options = {}) => {
    const {
      image,
      width = 256,
      height = 256,
      frame = 16,
      column = 4,
      row = 4,
      speed = 1
    } = options;

    // 创建几何体
    const geometry = new THREE.PlaneGeometry(1, 1);
    
    // 加载纹理
    const texture = new THREE.TextureLoader().load(image);
    texture.wrapS = THREE.RepeatWrapping;
    texture.wrapT = THREE.RepeatWrapping;
    
    // 计算单帧的UV偏移
    const frameWidth = 1 / column;
    const frameHeight = 1 / row;
    
    // 设置初始UV偏移
    texture.repeat.set(frameWidth, frameHeight);
    texture.offset.set(0, 1 - frameHeight); // 从顶部开始
    
    // 创建材质
    const material = new THREE.MeshBasicMaterial({
      map: texture,
      transparent: true,
      alphaTest: 0.1,
      side: THREE.DoubleSide
    });
    
    // 创建网格
    const mesh = new THREE.Mesh(geometry, material);
    
    // 添加动画属性
    mesh.currentFrame = 0;
    mesh.frameCount = frame;
    mesh.column = column;
    mesh.row = row;
    mesh.speed = speed;
    mesh.frameWidth = frameWidth;
    mesh.frameHeight = frameHeight;
    mesh.frameTimer = 0;
    
    // 更新序列帧的方法
    mesh.updateSequenceFrame = function() {
      this.frameTimer += this.speed;
      
      if (this.frameTimer >= 60 / this.frameCount) { // 假设60FPS
        this.frameTimer = 0;
        this.currentFrame = (this.currentFrame + 1) % this.frameCount;
        
        // 计算当前帧在纹理中的位置
        const col = this.currentFrame % this.column;
        const row = Math.floor(this.currentFrame / this.column);
        
        // 更新UV偏移
        this.material.map.offset.set(
          col * this.frameWidth,
          1 - (row + 1) * this.frameHeight // 从顶部开始
        );
      }
    };
    
    // 设置帧的方法
    mesh.setFrame = function(frameIndex) {
      if (frameIndex >= 0 && frameIndex < this.frameCount) {
        this.currentFrame = frameIndex;
        
        const col = frameIndex % this.column;
        const row = Math.floor(frameIndex / this.column);
        
        this.material.map.offset.set(
          col * this.frameWidth,
          1 - (row + 1) * this.frameHeight
        );
      }
    };
    
    // 播放动画的方法
    mesh.play = function() {
      this.isPlaying = true;
    };
    
    // 暂停动画的方法
    mesh.pause = function() {
      this.isPlaying = false;
    };
    
    // 停止动画的方法
    mesh.stop = function() {
      this.isPlaying = false;
      this.currentFrame = 0;
      this.setFrame(0);
    };
    
    // 设置播放速度的方法
    mesh.setSpeed = function(newSpeed) {
      this.speed = newSpeed;
    };
    
    // 默认开始播放
    mesh.isPlaying = true;
    
    return mesh;
  };
  
  /**
   * 创建简单的粒子序列帧动画
   * @param {Object} options - 配置选项
   * @returns {THREE.Mesh} 粒子网格对象
   */
  const createParticleSequenceFrame = (options = {}) => {
    const {
      color = 0x00ffff,
      size = 0.1,
      opacity = 0.8
    } = options;
    
    // 创建简单的粒子几何体
    const geometry = new THREE.SphereGeometry(size, 8, 8);
    
    // 创建材质
    const material = new THREE.MeshBasicMaterial({
      color: color,
      transparent: true,
      opacity: opacity
    });
    
    // 创建网格
    const mesh = new THREE.Mesh(geometry, material);
    
    // 添加简单的闪烁动画
    mesh.animationTimer = 0;
    mesh.baseOpacity = opacity;
    
    mesh.updateSequenceFrame = function() {
      this.animationTimer += 0.1;
      const opacity = this.baseOpacity * (0.5 + 0.5 * Math.sin(this.animationTimer));
      this.material.opacity = opacity;
    };
    
    return mesh;
  };
  
  /**
   * 批量更新序列帧动画
   * @param {Array<THREE.Mesh>} meshes - 网格数组
   */
  const updateSequenceFrames = (meshes) => {
    meshes.forEach(mesh => {
      if (mesh.updateSequenceFrame && mesh.isPlaying !== false) {
        mesh.updateSequenceFrame();
      }
    });
  };
  
  return {
    createSequenceFrame,
    createParticleSequenceFrame,
    updateSequenceFrames
  };
}