import React, { useEffect } from "react";
import { Sprite, useApp, useTick } from "@inlet/react-pixi";
import InGameSpace, { SpaceTextures } from "~graphics/filters/InGameSpace";

export interface InGameSpaceBGProps {
  textures: SpaceTextures;
}

export default function InGameSpaceBG({ textures }: InGameSpaceBGProps) {
  const app = useApp();
  const scale = 1;
  const menubg = new InGameSpace(app.renderer, scale, textures);

  useTick((delta) => {
    menubg.update(delta);
    menubg.render();
  });

  useEffect(() => {
    const handleResize = () => {
      menubg.rescale(scale);
    };
    app.renderer.on("resize", handleResize);
    return () => {
      app.renderer.off("resize", handleResize);
    };
  });

  return <Sprite texture={menubg.texture} scale={{ x: scale, y: scale }} />;
}