import * as THREE from 'three'
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js'
import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass.js'
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js'
import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass.js'

export function usePostProcessing() {
  /**
   * 创建后期处理组合器
   */
  function createComposer(
    renderer: THREE.WebGLRenderer,
    scene: THREE.Scene,
    camera: THREE.Camera,
  ) {
    const composer = new EffectComposer(renderer)
    const renderPass = new RenderPass(scene, camera)
    renderPass.clear = true
    renderPass.clearDepth = true
    composer.addPass(renderPass)
    return composer
  }

  /**
   * 创建辉光通道
   */
  function createBloomPass(
    width: number,
    height: number,
    strength = 1.5,
    radius = 0.4,
    threshold = 0.85,
  ) {
    return new UnrealBloomPass(
      new THREE.Vector2(width, height),
      strength,
      radius,
      threshold,
    )
  }

  /**
   * 创建轮廓描边通道
   */
  function createOutlinePass(
    width: number,
    height: number,
    scene: THREE.Scene,
    camera: THREE.Camera,
  ) {
    const outlinePass = new OutlinePass(
      new THREE.Vector2(width, height),
      scene,
      camera,
    )
    outlinePass.edgeStrength = 3
    outlinePass.edgeGlow = 0.5
    outlinePass.edgeThickness = 2
    outlinePass.pulsePeriod = 0
    outlinePass.visibleEdgeColor.set('#00ff00')
    outlinePass.hiddenEdgeColor.set('#00ff00')

    return outlinePass
  }

  return {
    createComposer,
    createBloomPass,
    createOutlinePass,
  }
}