import "pixi.js";
import "pixi-spine"; // Do this once at the very start of your code. This registers the loader!
import "../../extensions/GlobalPointerEvents";

import "../../src/styles/main.css";
import { Assets } from "pixi.js";

import { Locator } from "@popiplay/slot-game-kit";
import Renderer2D from "services/Renderer/Renderer2D.js";
import { SETTINGS } from "@popiplay/slot-game-kit";
import Events from "services/Events/Events.js";
import Audio from "services/Audio/Audio.js";
import DevScenes from "services/Scenes/DevScenes.js";
import PreloadScene from "../../src/game/scene/PreloadScene/PreloadScene.js";
import DevClock from "services/Clock/DevClock.js";
import StartScene from "../../src/game/scene/StartScene/StartScene.js";
import MainGameScene from "../../src/game/scene/MainGameScene/MainGameScene.js";
import Debug from "services/Debug/Debug.js";
import DebugViewport from "services/Viewport/DebugViewport.js";
import UI from "../../src/game/scene/UI/UI.js";
import RespinsScene from "../../src/game/scene/RespinsScene/RespinsScene";
import DevLocales from "../../services/Locales/DevLocales";
import FreespinsScene from "src/game/scene/FreespinsScene/FreespinsScene";

Locator.provide(new DevClock());
Locator.provide(new Renderer2D(SETTINGS.renderer));
Locator.provide(new DebugViewport(SETTINGS.viewport));
// Locator.provide(new ResizableViewport(SETTINGS.viewport));
Locator.provide(new Events());
// Locator.provide(new LogAudio());
Locator.provide(new Audio());
Locator.provide(new DevScenes(Locator.viewport));
Locator.provide(new Debug());
Locator.provide(new DevLocales("en"));

const content = document.createElement("div");
content.classList.add("content");
document.body.appendChild(content);
const container = document.createElement("div");
container.classList.add("canvas-wrapper");
content.appendChild(container);
Locator.renderer.view.classList.add("webgl");
container.appendChild(Locator.renderer.view);
Locator.viewport.resize();

const setMaps = (scene) => {
  const keys = Assets.get("slotMachine").symbolsKeys;
  scene.machine.inputs.initMap = new Array(5 * 4)
    .fill(null)
    .map(() => { return { key: keys[Math.floor(Math.random() * keys.length)] }; });
  scene.machine.inputs.screenMap = new Array(5 * 4)
    .fill(null)
    .map(() => { return { key: keys[Math.floor(Math.random() * keys.length)] }; });
  scene.machine.inputs.spin = true;
};

const preSet = (scene) => {
  const keys = Assets.get("slotMachine").symbolsKeys;
  scene.inputs = {
    model: { currency: null },
    gameData: {
      screenMap: new Array(5 * 4)
        .fill(null)
        .map(() => { return { key: keys[Math.floor(Math.random() * keys.length)] }; })
    }
  };
};

Assets.init({
  manifest: "./manifest.json",
})
  .then(async () => {

    await Assets.loadBundle("atlases");
    await Assets.loadBundle("preload");
    await Assets.loadBundle("fonts");
    await Assets.loadBundle("symbols");
    await Assets.loadBundle("gameplay");
    await Assets.loadBundle("intro");
    await Assets.loadBundle("sounds");
    await Assets.loadBundle("win_popups");
    await Assets.loadBundle("ui");
    await Assets.loadBundle("bonus_popups");
    await Assets.loadBundle("locales");
    await Locator.locales.load();
  })
  .then(() => {
    console.log("Welcome to sandbox!");

    Locator.scenes.add("preloader", new PreloadScene());
    Locator.scenes.add("startscene", new StartScene());
    Locator.scenes.add("main", new MainGameScene());
    Locator.scenes.add("respins", new RespinsScene());
    Locator.scenes.add("freespins", new FreespinsScene());
    Locator.scenes.add("gameplayui", new UI());
    // Locator.scenes.add("largewin", new BigWinScene());
    // Locator.scenes.get("largewin").inputs.win = 10000000;
    // Locator.scenes.add("totalwin", new TotalWinScene());
    // Locator.scenes.add("maxwin", new MaxWinScene());
    // Locator.scenes.add("BuyBonus", new BuyBonus());
    // Locator.scenes.add("win_bonus_game", new WinBonusGameScene());
    // Locator.scenes.add("freespins_left", new FreespinsLeftScene());

    Locator.clock.on("tick", (dt) => {
      Locator.scenes.update(dt);
      Locator.renderer.render(Locator.viewport);
    });
    Locator.clock.run();
    Locator.viewport.on("resize", (e) => {
      Locator.scenes.resize(e);
    });
    Locator.viewport.resize();

    const sceneNames = ["main", "respins", "freespins"];
    sceneNames.forEach((sceneName) => {
      const scene = Locator.scenes.get(sceneName);
      preSet(scene);
      scene.on("run", () => {
        setMaps(scene);
      });
    });

    Locator.scenes.run("gameplayui");
    Locator.scenes.run("main");
    // Locator.scenes.run("freespins");
    // Locator.scenes.run("respins");
  });