(() => {
  const { Engine, Render, Runner } = Matter;

  const create = ({
    sceneEl,
    width,
    height,
    background = "transparent",
    wireframes = false,
    showAngleIndicator = false,
  }) => {
    const engine = Engine.create();
    const render = Render.create({
      element: sceneEl,
      engine,
      options: {
        width,
        height,
        wireframes,
        background,
        showAngleIndicator,
        pixelRatio: window.devicePixelRatio || 1,
      },
    });
    Render.run(render);

    const runner = Runner.create();
    Runner.run(runner, engine);
    let runnerActive = true;

    const startRunner = () => {
      if (!runnerActive) {
        Runner.run(runner, engine);
        runnerActive = true;
      }
    };

    const stopRunner = () => {
      if (runnerActive) {
        Runner.stop(runner);
        runnerActive = false;
      }
    };

    const setRenderSize = (nextWidth, nextHeight) => {
      const pixelRatio = window.devicePixelRatio || 1;
      render.options.width = nextWidth;
      render.options.height = nextHeight;
      render.options.pixelRatio = pixelRatio;
      render.canvas.style.width = `${nextWidth}px`;
      render.canvas.style.height = `${nextHeight}px`;
      render.canvas.width = nextWidth * pixelRatio;
      render.canvas.height = nextHeight * pixelRatio;
      Render.setPixelRatio(render, pixelRatio);
      render.bounds.min.x = 0;
      render.bounds.min.y = 0;
      render.bounds.max.x = nextWidth;
      render.bounds.max.y = nextHeight;
      Render.lookAt(render, render.bounds);
    };

    return {
      engine,
      render,
      runner,
      startRunner,
      stopRunner,
      setRenderSize,
    };
  };

  window.PhysilinksEngine = { create };
})();