import CloseIcon from "../../asset/icon/Close--small.svg";
import animationData from "./lotties/Animation.json";

import lottie from "lottie-web";

import styles from "./_defly-wallet-sign-txn-toast.scss";
import {
  DEFLY_WALLET_SIGN_TXN_TOAST_ID,
  removeModalWrapperFromDOM
} from "../deflyWalletConnectModalUtils";

const deflyWalletSignTxnToastTemplate = document.createElement("template");

deflyWalletSignTxnToastTemplate.innerHTML = `
  <div class="defly-wallet-sign-txn-toast">
    <div class="defly-wallet-sign-txn-toast__header">
      <button
        id="defly-wallet-sign-txn-toast-close-button"
        class="defly-wallet-sign-txn-toast__header__close-button">
        <img src="${CloseIcon}" />
      </button>
    </div>
    <div class="defly-wallet-sign-txn-toast__content">
      <div id="defly-wallet-sign-txn-toast-lottie-animation" style="width:368;height:368" class="defly-wallet-sign-txn-toast__content__lottie-animation"></div>
      <p class="defly-wallet-sign-txn-toast__content__description">
        Please launch <b>Defly Wallet</b> on your iOS or Android device to sign this transaction.
      </p>
    </div>
  </div>
`;

export class DeflyWalletSignTxnToast extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({mode: "open"});

    if (this.shadowRoot) {
      const styleSheet = document.createElement("style");

      styleSheet.textContent = styles;

      this.shadowRoot.append(
        deflyWalletSignTxnToastTemplate.content.cloneNode(true),
        styleSheet
      );

      const closeButton = this.shadowRoot.getElementById(
        "defly-wallet-sign-txn-toast-close-button"
      );

      closeButton?.addEventListener("click", () => {
        removeModalWrapperFromDOM(DEFLY_WALLET_SIGN_TXN_TOAST_ID);
      });

      this.renderLottieAnimation();
    }
  }

  renderLottieAnimation() {
    const lottieWrapper = this.shadowRoot?.getElementById(
      "defly-wallet-sign-txn-toast-lottie-animation"
    );

    if (lottieWrapper) {
      lottie.loadAnimation({
        container: lottieWrapper,
        renderer: "svg",
        loop: true,
        autoplay: true,
        animationData
      });
    }
  }
}