<script setup lang="ts">
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';

import { BokehPass } from 'three/addons/postprocessing/BokehPass.js';
import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';

import { useTresContext, useLoop } from '@tresjs/core';
import { useControls } from '@tresjs/leches'
import { watch } from 'vue';

const { renderer, camera, scene } = useTresContext()

const composer = new EffectComposer(renderer.value);

const props = defineProps(['tres_values'])

if (camera.value) {
    const renderPass = new RenderPass(scene.value, camera.value);

    const bokehPass = new BokehPass(scene.value, camera.value, {
        focus: props.tres_values.focus.value.value,
        aperture: props.tres_values.aperture.value.value * 0.00001,
        maxblur: props.tres_values.maxblur.value.value * 0.01
    });

    const outputPass = new OutputPass();
    composer.addPass(renderPass);
    composer.addPass(bokehPass);
    composer.addPass(outputPass);
}
const { onAfterRender } = useLoop()
onAfterRender(() => {
    composer.render()
})
watch([
    props.tres_values.focus.value,
    props.tres_values.aperture.value,
    props.tres_values.maxblur.value
], () => {
    if (camera.value) {
        const args = {
            focus: props.tres_values.focus.value.value,
            aperture: props.tres_values.aperture.value.value * 0.00001,
            maxblur: props.tres_values.maxblur.value.value * 0.01
        }
        console.log(args)
        const bokehPass = new BokehPass(scene.value, camera.value, {
            focus: props.tres_values.focus.value.value,
            aperture: props.tres_values.aperture.value.value * 0.00001,
            maxblur: props.tres_values.maxblur.value.value * 0.01
        });
        composer.passes = []
        const renderPass = new RenderPass(scene.value, camera.value);
        const outputPass = new OutputPass();
        composer.addPass(renderPass);
        composer.addPass(bokehPass);
        composer.addPass(outputPass);
    }
}, { deep: true })
</script>
<template></template>