import './style.scss'
import { Canvas, useFrame } from '@react-three/fiber';
import Notes from './components/notes';
import Player from './components/player';
import Ground from './components/ground';
import React, { Suspense, useContext, useEffect, useRef, useState } from 'react';
import { Physics } from '@react-three/rapier';
import Sun from './components/sun';
import { Fog } from 'three';
import * as everforest from './_everforest.module.scss'

export const AppContext = React.createContext(null);

function KeyPressedClearer() {
    const { keysPressed } = useContext(AppContext);
    useFrame((_s, _d) => keysPressed.current = [], -1);
    return <></>
}

function App() {
    const keys = useRef([]);
    const keysPressed = useRef([]);
    const [messages, setMessages] = useState();
    const playerKeyDown = (event) => {
        if (!keys.current.includes(event.code)) {
            keysPressed.current.push(event.code);
        }
        keys.current.push(event.code);
    }
    const playerKeyUp = (event) => {
        keys.current = keys.current.filter(k => k != event.code);
    }
    useEffect(() => {
        window.addEventListener('keydown', playerKeyDown);
        window.addEventListener('keyup', playerKeyUp);
        return () => {
            window.removeEventListener('keydown', playerKeyDown);
            window.removeEventListener('keyup', playerKeyUp);
        };
    }, []);
    useEffect(() => {
        fetch('/api/message').then((res) => res.json()).then((data) => {
            console.log(data);
            setMessages(data);
        });
    }, []);
    return (
        <>
            <div className='dot' />
            <p className='unselectable hint'>
                E - read<br/>
                LMB - write
            </p>
            <AppContext.Provider value={{ keys: keys, keysPressed: keysPressed, messages: messages, setMessages: setMessages }}>
                <Canvas shadows>
                    <KeyPressedClearer />
                    <Suspense>
                        <fog color={everforest.bg0} attach="fog" far={500}/>
                        <Sun />
                        <Notes />
                        <Physics timeStep={1 / 60}>
                            <Player />
                            <Ground />
                        </Physics>
                    </Suspense>
                </Canvas>
            </AppContext.Provider>
        </>
    )
}

export default App;