import { Pane } from 'tweakpane';

import type { DevViewModel } from './DevViewModel';

/** Thin tweakpane wrapper for inspecting the model state in development. */
export class ModelDevPanel
{
    private readonly pane: Pane;

    constructor(private readonly viewModel: DevViewModel)
    {
        this.pane = new Pane({ title: 'ModelDevPanel' });
        this.setupBinding();
        this.update();
    }

    private setupBinding(): void
    {
        //@ts-expect-error declaration not exists in tweakpane
        this.pane.addBinding(this.viewModel, 'isRoundStarted');
        //@ts-expect-error declaration not exists in tweakpane
        this.pane.addBinding(this.viewModel, 'isRoundEndProcessing');
        //@ts-expect-error declaration not exists in tweakpane
        this.pane.addBinding(this.viewModel, 'waitingForCasinoRoundsNotification');
        //@ts-expect-error declaration not exists in tweakpane
        this.pane.addBinding(this.viewModel, 'waitingForRestore');
        //@ts-expect-error declaration not exists in tweakpane
        this.pane.addBinding(this.viewModel, 'waitingForWinProcessing');
        //@ts-expect-error declaration not exists in tweakpane
        this.pane.addBinding(this.viewModel, 'waitingForModeSwitch');
    }

    private update(): void
    {
        //@ts-expect-error declaration not exists in tweakpane
        this.pane.refresh();
        requestAnimationFrame(this.update.bind(this));
    }
}
