import Phaser from "phaser";
import {createContext, h} from "preact";
import {Signal, useSignalEffect, signal, useSignal} from "@preact/signals";
import {useContext} from "preact/hooks";

export const phaserContext = createContext<Signal<Phaser.Game | undefined>>(signal());

export const defaultPhaserConfig: Phaser.Types.Core.GameConfig = {
    type: Phaser.AUTO,
    width: 560,
    height: 560,
    parent: 'phaser-container',
    backgroundColor: '#f9fafb',
    scene: [],
};

export function PhaserGame(props: { config?: Partial<Phaser.Types.Core.GameConfig>, children?: any}){
    
    const gameSignal = useSignal<Phaser.Game>();
    
    useSignalEffect(() => {
        const phaserGame = new Phaser.Game(props.config || defaultPhaserConfig);
        gameSignal.value = phaserGame;
        
        return () => {
            gameSignal.value = undefined;
            phaserGame.destroy(true);
        }
    });
    
    return <div id="phaser-container" className="w-full h-full" >
        <phaserContext.Provider value={gameSignal}>
            {props.children}
        </phaserContext.Provider>
    </div>
}

export function PhaserScene(props: { sceneKey: string, scene: Phaser.Scene, autoStart: boolean, data?: object}){
    const context = useContext(phaserContext);
    useSignalEffect(() => {
        const game = context.value;
        if(!game) return;
        
        game.scene.add(props.sceneKey, props.scene, props.autoStart, props.data);
        return () => {
            game.scene.remove(props.sceneKey);
        }
    });
    
    return null;
}