import { VNode, h } from "preact";
import { allForms } from "./AntiMoneyLaunderingForm.js";
import { Pages } from "../pages.js";
import { NiceForm } from "../NiceForm.js";
import { AbsoluteTime, Amounts, TalerProtocolTimestamp } from "@gnu-taler/taler-util";
import { AmlExchangeBackend } from "../types.js";
import { useAmlCasesAPI } from "../hooks/useCaseDetails.js";
import { useOfficer } from "../hooks/useOfficer.js";
import { HandleAccountNotReady } from "./HandleAccountNotReady.js";
import { buildDecisionSignature, buildQuerySignature } from "../account.js";

export function NewFormEntry({
  account,
  type,
}: {
  account?: string;
  type?: string;
}): VNode {
  const officer = useOfficer();

  if (!account) {
    return <div>no account</div>;
  }
  if (!type) {
    return <SelectForm account={account} />;
  }
  if (officer.state !== "ready") {
    return <HandleAccountNotReady officer={officer} />;
  }

  const selectedForm = Number.parseInt(type ?? "0", 10);
  if (Number.isNaN(selectedForm)) {
    return <div>WHAT! {type}</div>;
  }
  const showingFrom = allForms[selectedForm].impl;
  const formName = allForms[selectedForm].name
  const initial = {
    fullName: "loggedIn_user_fullname",
    when: AbsoluteTime.now(),
    state: AmlExchangeBackend.AmlState.pending,
    threshold: Amounts.parseOrThrow("KUDOS:1000"),
  };
  const api = useAmlCasesAPI()
  
  return (
    <NiceForm
      initial={initial}
      form={showingFrom(initial)}
      onSubmit={(formValue) => {
        if (formValue.state === undefined || formValue.threshold === undefined) return;
        
        const justification = {
          index: selectedForm,
          name: formName,
          value: formValue
        }
        const decision: AmlExchangeBackend.AmlDecision = {
          justification: JSON.stringify(justification),
          decision_time: TalerProtocolTimestamp.now(),
          h_payto: account,
          new_state: formValue.state,
          new_threshold: Amounts.stringify(formValue.threshold),
          officer_sig: "",
          kyc_requirements: undefined
        }
        const signature = buildDecisionSignature(officer.account.signingKey, decision);
        decision.officer_sig = signature
        api.updateDecision(officer.account.accountId, decision);

        // alert(JSON.stringify(formValue));
      }}
    >
      <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>
  );
}