import { VNode, h } from "preact";
import { allForms } from "./AntiMoneyLaunderingForm.js";
import { Pages } from "../pages.js";
import { NiceForm } from "../NiceForm.js";
import { AmlState } from "../types.js";
import { AbsoluteTime, Amounts } from "@gnu-taler/taler-util";

export function NewFormEntry({
  account,
  type,
}: {
  account?: string;
  type?: string;
}): VNode {
  if (!account) {
    return <div>no account</div>;
  }
  if (!type) {
    return <SelectForm account={account} />;
  }

  const selectedForm = Number.parseInt(type ?? "0", 10);
  if (Number.isNaN(selectedForm)) {
    return <div>WHAT! {type}</div>;
  }
  const showingFrom = allForms[selectedForm].impl;
  const initial = {
    fullName: "loggedIn_user_fullname",
    when: AbsoluteTime.now(),
    state: AmlState.pending,
    threshold: Amounts.parseOrThrow("USD:10"),
  };
  return (
    <NiceForm
      initial={initial}
      form={showingFrom(initial)}
      onSubmit={(v) => {
        alert(JSON.stringify(v));
      }}
    >
      <div class="mt-6 flex items-center justify-end gap-x-6">
        <a
          //   type="button"
          href={Pages.details.url({ account })}
          class="text-sm font-semibold leading-6 text-gray-900"
        >
          Cancel
        </a>
        <button
          type="submit"
          class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
        >
          Confirm
        </button>
      </div>
    </NiceForm>
  );
}

function SelectForm({ account }: { account: string }) {
  return (
    <div>
      <pre>New form for account: {account}</pre>
      {allForms.map((form, idx) => {
        return (
          <a
            href={Pages.newFormEntry.url({ account, type: String(idx) })}
            class="m-4 block rounded-md w-fit border-0 p-3 py-2 text-center text-sm bg-indigo-700 text-white shadow-sm hover:bg-indigo-600"
          >
            {form.name}
          </a>
        );
      })}
    </div>
  );
}