import type { JSX } from "solid-js";
import { render } from "solid-js/web";

export function renderView(view: JSX.Element | (() => JSX.Element)) {
  const container = document.createElement("div");
  document.body.appendChild(container);
  const dispose = render(() => (typeof view === "function" ? view() : view), container);
  return {
    container,
    dispose: () => {
      dispose();
      container.remove();
    },
  };
}

export async function flushView(): Promise<void> {
  await Promise.resolve();
  await new Promise((resolve) => window.setTimeout(resolve, 0));
  await Promise.resolve();
}

export function inputText(
  element: HTMLInputElement | HTMLTextAreaElement,
  value: string
): void {
  element.value = value;
  element.dispatchEvent(new Event("input", { bubbles: true }));
}

export function changeSelect(
  element: HTMLSelectElement,
  value: string
): void {
  element.value = value;
  element.dispatchEvent(new Event("change", { bubbles: true }));
}

export function pressEnter(element: HTMLElement): void {
  element.dispatchEvent(new KeyboardEvent("keydown", { bubbles: true, key: "Enter" }));
}