/*
 This file is part of GNU Taler
 (C) 2021-2024 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 { TalerUri, TalerUris, TranslatedString } from "@gnu-taler/taler-util";
import { h, VNode } from "preact";
import { useEffect, useRef } from "preact/hooks";
import qrcode from "qrcode-generator";
import logo from "../../assets/logo-2021.svg";
import chFlag from "../../assets/ch-flag.svg";

export function QR({
  children,
  text,
  style,
  ...rest
}: {
  text: string;
  children?: VNode<HTMLImageElement>;
} & h.JSX.HTMLAttributes<HTMLDivElement>): VNode {
  const divRef = useRef<HTMLDivElement>(null);
  useEffect(() => {
    const qr = qrcode(0, "H");
    qr.addData(text);
    qr.make();
    if (divRef.current) {
      const image = qr.createSvgTag({
        scalable: true,
      });
      const imageURL = `data:image/svg+xml,${encodeURIComponent(image)}`;
      divRef.current.innerHTML = `<img src=${JSON.stringify(
        imageURL,
      )} alt=${JSON.stringify(
        `QR Code containing the data ${text
          .replace(/&/g, "&amp;")
          .replace(/</g, "&lt;")
          .replace(/>/g, "&gt;")
          .replace(/"/g, "&quot;")
          .replace(/'/g, "&#039;")}`,
      )} />`;
    }
  });

  if (children) {
    return (
      <div {...rest} style={{ ...(style as any), position: "relative" }}>
        <div ref={divRef} />
        <div
          style={{
            position: "absolute",
            top: "50%",
            left: "50%",
            transform: "translate(-50%, -50%)",
            border: "2px solid black",
            backgroundColor: "white",
            display: "flex",
            padding: 4,
            alignContent: "center",
            borderRadius: "10%",
          }}
        >
          {children}
        </div>
      </div>
    );
  }
  return <div {...rest} ref={divRef} />;
}

export function QR_Taler({ uri }: { uri: TalerUri }): VNode {
  const stringUri = TalerUris.toString(uri);
  return (
    <QR
      style={{ width: "90%", maxWidth: 400, margin: "auto" }}
      text={stringUri}
    >
      <img src={logo} style={{ width: 100, height: 50 }} />
    </QR>
  );
}

export function QR_TOTP({ otpAuthURI }: { otpAuthURI: string }): VNode {
  return (
    <QR
      style={{ width: "90%", maxWidth: 400, margin: "auto" }}
      text={otpAuthURI}
    >
      <div style={{ fontWeight: "bold" }}>T-OTP</div>
    </QR>
  );
}

export function QR_SwissBank({ text }: { text: string }): VNode {
  return (
    <QR style={{ width: "90%", maxWidth: 400, margin: "auto" }} text={text}>
      <img src={chFlag} style={{ width: 50, height: 50 }} />
    </QR>
  );
}

export function QR_Bank({
  text,
  label,
}: {
  text: string;
  label: TranslatedString;
}): VNode {
  return (
    <QR style={{ width: "90%", maxWidth: 400, margin: "auto" }} text={text}>
      <div style={{ fontWeight: "bold" }}>{label}</div>
    </QR>
  );
}
