class Button {
  constructor(innerHTML, onclick) {
    this.el = document.createElement('button');
    this.el.innerHTML = innerHTML;
    this.el.onclick = onclick;
  }
}

export class Controls {
  constructor(parentBox) {
    this.disableAutoplayButton = new Button('Disable Auto-play', () => {
      const url = new URL(window.location.href);
      url.searchParams.set('auto', 'false');
      window.location.href = url.href;
    });
    this.enableAutoplayButton = new Button('Enable Auto-play', () => {
      const url = new URL(window.location.href);
      url.searchParams.delete('auto');
      window.location.href = url.href;
    });
    this.stepButton = new Button('Next Action', () => {
      console.log('Next Action button clicked');
      document.dispatchEvent(new Event('next-action'));
    });

    if (window.autoPlay) {
      parentBox.el.appendChild(this.disableAutoplayButton.el);
    } else {
      parentBox.el.appendChild(this.enableAutoplayButton.el);
      parentBox.el.appendChild(this.stepButton.el);
      // Disable `stepButton` when test is complete
      setInterval(() => {
        this.stepButton.el.disabled = mocha._state !== 'running';
      }, 200);
    }
  }
}

export async function delayOrWait(delayMs) {
  if (window.autoPlay) {
    await new Promise((resolve) => {
      setTimeout(resolve, delayMs);
    });
  } else {
    await new Promise((resolve) => {
      document.addEventListener('next-action', () => {
        console.log('next-action event received');
        resolve();
      }, { once: true });
    });
  }
}