import React, { PropsWithChildren, useCallback, useEffect, useMemo, useState } from "react";
import { Container } from "pixi.js";
import { StageContext, StageContextValue } from "./Stage.context";
import { useWorld } from "../hooks";
import { Layer } from "../layer";

export const Stage: React.FC<PropsWithChildren> = ({ children }) => {
    const { application } = useWorld();
    const [things, setThings] = useState<Container[]>([]);

    const addObject = useCallback((thing: Container) => {
        setThings((oldThings) => [...oldThings, thing]);
    }, []);

    const removeObject = useCallback((thing: Container) => {
        setThings((oldThings) => oldThings.filter(({ uid }) => uid === thing.uid));
    }, []);

    const conextValue = useMemo<StageContextValue>(
        () => ({
            addObject,
            removeObject
        }),
        [addObject, removeObject]
    );

    useEffect(() => {
        if (!application) {
            return;
        }

        application.stage.addChild(...things);

        return () => {
            application.stage.removeChild(...things);
        };
    }, [things, application]);

    return (
        <StageContext.Provider value={conextValue}>
            <Layer>{children}</Layer>
        </StageContext.Provider>
    );
};