'use client';

import './page.css';

import { Canvas, useFrame, useThree } from "@react-three/fiber";
import { BrightnessContrast, EffectComposer, HueSaturation, Noise, Pixelation, Vignette } from "@react-three/postprocessing";
import { Suspense, useEffect, useState } from "react";

import { AmbientSound } from './scene-components/ambient-sound';

import { fearState } from './state';

import TheCreature from './scene-components/creature';
import Player from './scene-components/player';
import Hallway from './scene-components/hallway';

import { AudioListener } from 'three';

function PostProcessing() {
    const [wasCaught, setWasCaught] = useState(fearState.wasCaught);

    useEffect(() => {
        const unsubscribe = fearState.subscribe(() => {
            setWasCaught(fearState.wasCaught);
        });
        return () => unsubscribe();
    }, []);

    return (<EffectComposer>
        <Pixelation granularity={wasCaught ? 18 : 12} />
        <Vignette />
        <Noise opacity={wasCaught ? 0.01 : 0.005} />
        <BrightnessContrast
            brightness={-0.01}
            contrast={0.05}
        />
        <HueSaturation saturation={wasCaught ? 1 : 0} />
    </EffectComposer>)
}

function ListenerCreator() {
    const { camera } = useThree();

    useEffect(() => {
        const listener = new AudioListener();
        camera.add(listener);

        return () => {
            camera.remove(listener);
        };
    }, [camera]);

    return null;
}

function FearStateUpdater() {
    useFrame((state, delta) => {
        fearState.update(delta);
    });
    return null;
}

export default function Fear() {
    const [isRustActive, setIsRustActive] = useState(fearState.isRustActive);
    const [wasCaught, setWasCaught] = useState(fearState.isRustActive);

    useEffect(() => {
        const unsubscribe = fearState.subscribe(() => {
            setIsRustActive(fearState.isRustActive);
            setWasCaught(fearState.wasCaught)
        });
        return () => unsubscribe();
    }, []);

    return (<>
        <Canvas
            shadows
            gl={{ antialias: true }}
            className='canvas'
            camera={{ position: [0, 3, -5], fov: 65, far: 100 }}
        >
            <FearStateUpdater />

            <ListenerCreator />

            <color attach="background" args={['#050505']} />

            <ambientLight intensity={0.0225} />
            <fogExp2 attach='fog' args={[0x050505, 0.035]} />
            <PostProcessing />

            <Suspense fallback={null}>
                <Hallway />
                <TheCreature />
                <Player />
            </Suspense>

            <AmbientSound
                key="ambient-1"
                url='fear/snd/ambience.mp3'
                volume={isRustActive ? 0 : 1}
            />

            <AmbientSound
                key="ambient-2"
                url='fear/snd/ambience2.mp3'
                volume={isRustActive ? 1 : 0}
            />

            {wasCaught ? <AmbientSound
                key="ambient-glitch"
                url='fear/snd/glitch.mp3'
                volume={1}
            /> : null}
        </Canvas>
    </>)
}