import type { Application } from 'pixi.js';
import { HttpFontStore } from '../core/store/HttpFontStore';
import { HttpProjectStore } from '../core/store/HttpProjectStore';
import { HttpTextureStore } from '../core/store/HttpTextureStore';
import type { VStack } from '../ui';
import { fontLibrary } from '../viewport/FontLibrary';
import { textureLibrary } from '../viewport/TextureLibrary';
import { installDebugHook } from './debugHook';
import { Editor } from './Editor';
import { EditorState } from './state';

const API_ENDPOINT = '/game-maker/api/index.php';

/**
 * Where uploaded images live: the API writes them, the browser reads them straight off disk as
 * static files named by their content hash. Fonts work the same way, one directory over.
 */
const TEXTURE_BASE = '/game-maker/data/textures';
const FONT_BASE = '/game-maker/data/fonts';

/** Wires state, stores and the editor composition together and opens the first project. */
export async function startEditor(app: Application, root: VStack): Promise<void> {
  const state = new EditorState();
  textureLibrary.configure(TEXTURE_BASE);
  fontLibrary.configure(FONT_BASE);
  const editor = new Editor(
    app,
    root,
    state,
    new HttpProjectStore(API_ENDPOINT),
    new HttpTextureStore(API_ENDPOINT),
    new HttpFontStore(API_ENDPOINT),
  );
  installDebugHook(app, state, editor);
  await editor.boot();
}