/**
 * GameController 自定义 Inspector（需启用扩展 game-controller-inspector）
 * 构建: 在扩展目录执行 npm run build，或在 Creator 扩展管理器中启用
 */

export const template = `
<div class="game-controller-inspector">
  <ui-prop type="dump" prop="dump"></ui-prop>
  <ui-section header="关卡调试">
    <ui-input id="input-level" placeholder="inputLevel"></ui-input>
    <ui-button id="btn-switch">SwitchLevel</ui-button>
    <ui-button id="btn-end">EndInput</ui-button>
  </ui-section>
  <ui-section header="主题">
    <ui-input id="input-style" placeholder="inputStyle"></ui-input>
    <ui-button id="btn-style">ChangeStyle</ui-button>
  </ui-section>
  <ui-section header="多人">
    <ui-input id="input-coins" placeholder='coinStr JSON'></ui-input>
    <ui-button id="btn-mult">StartMultPlay</ui-button>
  </ui-section>
  <ui-section header="音频">
    <ui-button id="btn-mute">Mute</ui-button>
    <ui-button id="btn-unmute">Unmute</ui-button>
  </ui-section>
</div>
`;

export const $ = {
    inputLevel: '#input-level',
    inputStyle: '#input-style',
    inputCoins: '#input-coins',
    btnSwitch: '#btn-switch',
    btnEnd: '#btn-end',
    btnStyle: '#btn-style',
    btnMult: '#btn-mult',
    btnMute: '#btn-mute',
    btnUnmute: '#btn-unmute',
} as Record<string, string>;

type Dump = { value: Record<string, { value: unknown }> };

export function update(this: { dump: Dump; $: Record<string, HTMLElement> }, dump: Dump) {
    this.dump = dump;
    const v = dump.value;
    if (this.$.inputLevel && v.inputLevel) {
        (this.$.inputLevel as unknown as { value: string }).value = String(v.inputLevel.value ?? '1');
    }
    if (this.$.inputStyle && v.inputStyle) {
        (this.$.inputStyle as unknown as { value: string }).value = String(v.inputStyle.value ?? 'default');
    }
    if (this.$.inputCoins && v.coinStr) {
        (this.$.inputCoins as unknown as { value: string }).value = String(v.coinStr.value ?? '[]');
    }
}

function callMethod(uuid: string, name: string, args: unknown[] = []) {
    // @ts-expect-error Editor global
    if (typeof Editor !== 'undefined' && Editor.Message) {
        // @ts-expect-error Editor API
        Editor.Message.request('scene', 'execute-component-method', { uuid, name, args });
    }
}

export function ready(this: { dump: Dump; $: Record<string, HTMLElement> }) {
    const uuid = () => this.dump.value.uuid?.value as string;

    this.$.btnSwitch?.addEventListener('confirm', () => {
        const id = parseInt((this.$.inputLevel as unknown as { value: string }).value || '1', 10);
        callMethod(uuid(), 'switchLevel', [id]);
    });
    this.$.btnEnd?.addEventListener('confirm', () => callMethod(uuid(), 'callSetIsInputEnd', [1]));
    this.$.btnStyle?.addEventListener('confirm', () => {
        const s = (this.$.inputStyle as unknown as { value: string }).value || 'default';
        callMethod(uuid(), 'changeUIStyle', [s]);
    });
    this.$.btnMult?.addEventListener('confirm', () => {
        const coins = (this.$.inputCoins as unknown as { value: string }).value || '[]';
        callMethod(uuid(), 'startMultPlay', ['PlayerA1', coins]);
    });
    this.$.btnMute?.addEventListener('confirm', () => callMethod(uuid(), 'callMute', []));
    this.$.btnUnmute?.addEventListener('confirm', () => callMethod(uuid(), 'callUnmute', []));
}