import * as THREE from 'three';
import { state } from '../state.js';
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
import { OutputPass } from 'three/examples/jsm/postprocessing/OutputPass.js';
import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';

export function initPostprocessing() {
    const composer = new EffectComposer(state.renderer);

    // 1. The first pass is always to render the scene itself.
    const renderPass = new RenderPass(state.scene, state.camera);
    composer.addPass(renderPass);

    const resolution = new THREE.Vector2( window.innerWidth, window.innerHeight );
    const bloomPass = new UnrealBloomPass( resolution, 0.9, 0.1, 0.6 );
    composer.addPass( bloomPass );

    // 3. Add an output pass to render the final result to the screen.
    const outputPass = new OutputPass();
    composer.addPass(outputPass);

    // Store the composer and passes in the global state
    state.composer = composer;
}

export function onResizePostprocessing() {
    if (state.composer) {
        state.composer.setSize(window.innerWidth, window.innerHeight);
    }
    if (state.ssaoPass) {
        state.ssaoPass.setSize(window.innerWidth, window.innerHeight);
    }
}