/*
 This file is part of GNU Taler
 (C) 2022 Taler Systems S.A.

 GNU Taler is free software; you can redistribute it and/or modify it under the
 terms of the GNU General Public License as published by the Free Software
 Foundation; either version 3, or (at your option) any later version.

 GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
 WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 A PARTICULAR PURPOSE.  See the GNU General Public License for more details.

 You should have received a copy of the GNU General Public License along with
 GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
 */

import {
  Amounts,
  buildPayto,
  Logger,
  parsePaytoUri,
  stringifyPaytoUri,
} from "@gnu-taler/taler-util";
import {
  InternationalizationAPI,
  RequestError,
  useTranslationContext,
} from "@gnu-taler/web-util/lib/index.browser";
import { h, VNode } from "preact";
import { StateUpdater, useEffect, useRef, useState } from "preact/hooks";
import { useBackendContext } from "../context/backend.js";
import { PageStateType, usePageContext } from "../context/pageState.js";
import { useAccessAPI } from "../hooks/access.js";
import { BackendState } from "../hooks/backend.js";
import { undefinedIfEmpty } from "../utils.js";
import { ShowInputErrorLabel } from "./ShowInputErrorLabel.js";

const logger = new Logger("PaytoWireTransferForm");

export function PaytoWireTransferForm({
  focus,
  onError,
  onSuccess,
  currency,
}: {
  focus?: boolean;
  onError: (e: PageStateType["error"]) => void;
  onSuccess: () => void;
  currency: string;
}): VNode {
  const backend = useBackendContext();
  // const { pageState, pageStateSetter } = usePageContext(); // NOTE: used for go-back button?

  const [isRawPayto, setIsRawPayto] = useState(false);
  // const [submitData, submitDataSetter] = useWireTransferRequestType();
  const [iban, setIban] = useState<string | undefined>(undefined);
  const [subject, setSubject] = useState<string | undefined>(undefined);
  const [amount, setAmount] = useState<string | undefined>(undefined);

  const [rawPaytoInput, rawPaytoInputSetter] = useState<string | undefined>(
    undefined,
  );
  const { i18n } = useTranslationContext();
  const ibanRegex = "^[A-Z][A-Z][0-9]+$";
  const ref = useRef<HTMLInputElement>(null);
  useEffect(() => {
    if (focus) ref.current?.focus();
  }, [focus, isRawPayto]);

  let parsedAmount = undefined;
  const IBAN_REGEX = /^[A-Z][A-Z0-9]*$/;

  const errorsWire = undefinedIfEmpty({
    iban: !iban
      ? i18n.str`Missing IBAN`
      : !IBAN_REGEX.test(iban)
      ? i18n.str`IBAN should have just uppercased letters and numbers`
      : undefined,
    subject: !subject ? i18n.str`Missing subject` : undefined,
    amount: !amount
      ? i18n.str`Missing amount`
      : !(parsedAmount = Amounts.parse(`${currency}:${amount}`))
      ? i18n.str`Amount is not valid`
      : Amounts.isZero(parsedAmount)
      ? i18n.str`Should be greater than 0`
      : undefined,
  });

  const { createTransaction } = useAccessAPI();

  if (!isRawPayto)
    return (
      <div>
        <form
          class="pure-form"
          name="wire-transfer-form"
          onSubmit={(e) => {
            e.preventDefault();
          }}
          autoCapitalize="none"
          autoCorrect="off"
        >
          <p>
            <label for="iban">{i18n.str`Receiver IBAN:`}</label>&nbsp;
            <input
              ref={ref}
              type="text"
              id="iban"
              name="iban"
              value={iban ?? ""}
              placeholder="CC0123456789"
              required
              pattern={ibanRegex}
              onInput={(e): void => {
                setIban(e.currentTarget.value);
              }}
            />
            <br />
            <ShowInputErrorLabel
              message={errorsWire?.iban}
              isDirty={iban !== undefined}
            />
            <br />
            <label for="subject">{i18n.str`Transfer subject:`}</label>&nbsp;
            <input
              type="text"
              name="subject"
              id="subject"
              placeholder="subject"
              value={subject ?? ""}
              required
              onInput={(e): void => {
                setSubject(e.currentTarget.value);
              }}
            />
            <br />
            <ShowInputErrorLabel
              message={errorsWire?.subject}
              isDirty={subject !== undefined}
            />
            <br />
            <label for="amount">{i18n.str`Amount:`}</label>&nbsp;
            <div style={{ width: "max-content" }}>
              <input
                type="text"
                readonly
                class="currency-indicator"
                size={currency?.length}
                maxLength={currency?.length}
                tabIndex={-1}
                value={currency}
              />
              &nbsp;
              <input
                type="number"
                name="amount"
                id="amount"
                placeholder="amount"
                required
                value={amount ?? ""}
                onInput={(e): void => {
                  setAmount(e.currentTarget.value);
                }}
              />
            </div>
            <ShowInputErrorLabel
              message={errorsWire?.amount}
              isDirty={amount !== undefined}
            />
          </p>

          <p style={{ display: "flex", justifyContent: "space-between" }}>
            <input
              type="submit"
              class="pure-button pure-button-primary"
              disabled={!!errorsWire}
              value="Send"
              onClick={async (e) => {
                e.preventDefault();
                if (!(iban && subject && amount)) {
                  return;
                }
                const ibanPayto = buildPayto("iban", iban, undefined);
                ibanPayto.params.message = encodeURIComponent(subject);
                const paytoUri = stringifyPaytoUri(ibanPayto);

                await createTransaction({
                  paytoUri,
                  amount: `${currency}:${amount}`,
                });
                // return await createTransactionCall(
                //   transactionData,
                //   backend.state,
                //   pageStateSetter,
                //   () => {
                //     setAmount(undefined);
                //     setIban(undefined);
                //     setSubject(undefined);
                //   },
                //   i18n,
                // );
              }}
            />
            <input
              type="button"
              class="pure-button"
              value="Clear"
              onClick={async (e) => {
                e.preventDefault();
                setAmount(undefined);
                setIban(undefined);
                setSubject(undefined);
              }}
            />
          </p>
        </form>
        <p>
          <a
            href="/account"
            onClick={() => {
              setIsRawPayto(true);
            }}
          >
            {i18n.str`Want to try the raw payto://-format?`}
          </a>
        </p>
      </div>
    );

  const parsed = !rawPaytoInput ? undefined : parsePaytoUri(rawPaytoInput);

  const errorsPayto = undefinedIfEmpty({
    rawPaytoInput: !rawPaytoInput
      ? i18n.str`required`
      : !parsed
      ? i18n.str`does not follow the pattern`
      : !parsed.params.amount
      ? i18n.str`use the "amount" parameter to specify the amount to be transferred`
      : Amounts.parse(parsed.params.amount) === undefined
      ? i18n.str`the amount is not valid`
      : !parsed.params.message
      ? i18n.str`use the "message" parameter to specify a reference text for the transfer`
      : !parsed.isKnown || parsed.targetType !== "iban"
      ? i18n.str`only "IBAN" target are supported`
      : !IBAN_REGEX.test(parsed.iban)
      ? i18n.str`IBAN should have just uppercased letters and numbers`
      : undefined,
  });

  return (
    <div>
      <p>{i18n.str`Transfer money to account identified by payto:// URI:`}</p>
      <form
        class="pure-form"
        name="payto-form"
        onSubmit={(e) => {
          e.preventDefault();
        }}
        autoCapitalize="none"
        autoCorrect="off"
      >
        <p>
          <label for="address">{i18n.str`payto URI:`}</label>&nbsp;
          <input
            name="address"
            type="text"
            size={50}
            ref={ref}
            id="address"
            value={rawPaytoInput ?? ""}
            required
            placeholder={i18n.str`payto address`}
            // pattern={`payto://iban/[A-Z][A-Z][0-9]+?message=[a-zA-Z0-9 ]+&amount=${currency}:[0-9]+(.[0-9]+)?`}
            onInput={(e): void => {
              rawPaytoInputSetter(e.currentTarget.value);
            }}
          />
          <ShowInputErrorLabel
            message={errorsPayto?.rawPaytoInput}
            isDirty={rawPaytoInput !== undefined}
          />
          <br />
          <div style={{ fontSize: "small", marginTop: 4 }}>
            Hint:
            <code>
              payto://iban/[receiver-iban]?message=[subject]&amount=[{currency}
              :X.Y]
            </code>
          </div>
        </p>
        <p>
          <input
            class="pure-button pure-button-primary"
            type="button"
            disabled={!!errorsPayto}
            value={i18n.str`Send`}
            onClick={async () => {
              if (!rawPaytoInput) {
                logger.error("Didn't get any raw Payto string!");
                return;
              }

              try {
                await createTransaction({
                  paytoUri: rawPaytoInput,
                });
                onSuccess();
                rawPaytoInputSetter(undefined);
              } catch (error) {
                if (error instanceof RequestError) {
                  const errorData: SandboxBackend.SandboxError =
                    error.info.error;

                  onError({
                    title: i18n.str`Transfer creation gave response error`,
                    description: errorData.error.description,
                    debug: JSON.stringify(errorData),
                  });
                }
              }
            }}
          />
        </p>
        <p>
          <a
            href="/account"
            onClick={() => {
              setIsRawPayto(false);
            }}
          >
            {i18n.str`Use wire-transfer form?`}
          </a>
        </p>
      </form>
    </div>
  );
}