import { AbsoluteTime, AmountJson, Amounts } from "@gnu-taler/taler-util";
import { useTranslationContext } from "@gnu-taler/web-util/browser";
import { h } from "preact";
import { NiceForm } from "../NiceForm.js";
import { v1 as form_902_11e_v1 } from "../forms/902_11e.js";
import { v1 as form_902_12e_v1 } from "../forms/902_12e.js";
import { v1 as form_902_13e_v1 } from "../forms/902_13e.js";
import { v1 as form_902_15e_v1 } from "../forms/902_15e.js";
import { v1 as form_902_1e_v1 } from "../forms/902_1e.js";
import { v1 as form_902_4e_v1 } from "../forms/902_4e.js";
import { v1 as form_902_5e_v1 } from "../forms/902_5e.js";
import { v1 as form_902_9e_v1 } from "../forms/902_9e.js";
import { v1 as simplest } from "../forms/simplest.js";
import { Pages } from "../pages.js";
import { AmlExchangeBackend } from "../types.js";

export type Justification = {
  // form index in the list of forms
  index: number;
  // form name
  name: string;
  // form values
  value: any;
}

export function AntiMoneyLaunderingForm({ account, selectedForm, onSubmit }: { account: string, selectedForm: number, onSubmit: (justification: Justification, state: AmlExchangeBackend.AmlState, threshold: AmountJson) => Promise<void>; }) {
  const { i18n } = useTranslationContext()
  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"),
  };
  return (
    <NiceForm
      initial={initial}
      form={showingFrom(initial)}
      onUpdate={() => { }}
      onSubmit={(formValue) => {
        if (formValue.state === undefined || formValue.threshold === undefined) return;
        const st = formValue.state;
        const amount = formValue.threshold;

        const justification = {
          index: selectedForm,
          name: formName,
          value: formValue
        }

        onSubmit(justification, st, amount);
      }}
    >
      <div class="mt-6 flex items-center justify-end gap-x-6">
        <a
          //   type="button"
          href={Pages.account.url({ account })}
          class="text-sm font-semibold leading-6 text-gray-900"
        >
          <i18n.Translate>Cancel</i18n.Translate>
        </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"
        >
          <i18n.Translate>Confirm</i18n.Translate>
        </button>
      </div>
    </NiceForm>
  );
}

export interface State {
  state: AmlExchangeBackend.AmlState;
  threshold: AmountJson;
}

const DocumentDuplicateIcon = <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
  <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75" />
</svg>


export const allForms = [
  {
    name: "Simple comment",
    icon: DocumentDuplicateIcon,
    impl: simplest,
  },
  {
    name: "Identification form (902.1e)",
    icon: DocumentDuplicateIcon,
    impl: form_902_1e_v1,
  },
  {
    name: "Operational legal entity or partnership (902.11e)",
    icon: DocumentDuplicateIcon,
    impl: form_902_11e_v1,
  },
  {
    name: "Foundations (902.12e)",
    icon: DocumentDuplicateIcon,
    impl: form_902_12e_v1,
  },
  {
    name: "Declaration for trusts (902.13e)",
    icon: DocumentDuplicateIcon,
    impl: form_902_13e_v1,
  },
  {
    name: "Information on life insurance policies (902.15e)",
    icon: DocumentDuplicateIcon,
    impl: form_902_15e_v1,
  },
  {
    name: "Declaration of beneficial owner (902.9e)",
    icon: DocumentDuplicateIcon,
    impl: form_902_9e_v1,
  },
  {
    name: "Customer profile (902.5e)",
    icon: DocumentDuplicateIcon,
    impl: form_902_5e_v1,
  },
  {
    name: "Risk profile (902.4e)",
    icon: DocumentDuplicateIcon,
    impl: form_902_4e_v1,
  },
];