import styles from "../assets/css/shadowroot/lisio-disable-banner.css?raw";
import LisioLightMessageManager from "../managers/lisio-light-message-manager";
import LisioTranslationController from "./lisio-translation-controller";

class LisioDisableBannerController {
  private _banner: HTMLDivElement;
  private _bannerText?: HTMLParagraphElement;
  private _disableButton: HTMLButtonElement;
  private _spacer: HTMLDivElement;

  constructor(primaryColor: string) {
    this._spacer = document.createElement("div");
    this._spacer.id = "lisio-div-spacing";
    this._spacer.style.display = "none";
    this._spacer.style.width = "100%";
    this._spacer.style.height = "60px";

    this._banner = document.createElement("div");
    this._banner.id = "lisio-disable-band";
    this._banner.classList.add("lisio-hidden");

    this._banner.innerHTML = this.getHTML(primaryColor);
    const text = this._banner.querySelector<HTMLParagraphElement>(
      "button#lisio-disable-button p",
    );
    if (text != undefined) {
      this._bannerText = text;
    }

    this._disableButton = this._banner.firstElementChild as HTMLButtonElement;

    this._disableButton.addEventListener("click", () => {
      LisioLightMessageManager.current.sendDisableMessageToIframe();
      if (window.location.origin === "null") {
        window.close();
      }
    });

    window.addEventListener("lisio-lang-change", () => {
      if (this._bannerText != undefined) {
        LisioTranslationController.current.translateBanner(this._bannerText);
      }
    });
  }

  public get banner() {
    return this._banner;
  }

  public get spacer() {
    return this._spacer;
  }

  public hideBanner() {
    this._banner.classList.add("lisio-hidden");
    this._spacer.style.display = "none";
  }

  public showBanner() {
    this._banner.classList.remove("lisio-hidden");
    this._spacer.style.display = "block";
  }

  private getHTML(primaryColor: string) {
    return `
      <button id="lisio-disable-button" class="lisio-disable" >                      
          <svg aria-hidden="true" style="border-radius:20px  !important" xmlns="http://www.w3.org/2000/svg" height="42" viewbox="0 0 27 26" fill="none"><path fill="${primaryColor}" d="M13 26c7.18 0 13-5.82 13-13S20.18 0 13 0 0 5.82 0 13s5.82 13 13 13Z"/><path fill="#fff" d="M15.698 7.303c.271-.579.986-.814 1.501-.474a7.41 7.41 0 0 1 2.842 3.682 7.319 7.319 0 0 1 .07 4.63 7.419 7.419 0 0 1-2.727 3.77 7.57 7.57 0 0 1-4.46 1.433 7.558 7.558 0 0 1-4.45-1.462 7.4 7.4 0 0 1-2.697-3.786 7.32 7.32 0 0 1 .108-4.63 7.428 7.428 0 0 1 2.872-3.664c.566-.373 1.297-.04 1.53.523.307.561.04 1.282-.454 1.653a4.987 4.987 0 0 0-1.693 2.516 4.926 4.926 0 0 0 .088 3.018 4.986 4.986 0 0 0 1.835 2.413 5.096 5.096 0 0 0 5.828.018 4.998 4.998 0 0 0 1.854-2.402c.352-.97.391-2.024.111-3.017a4.975 4.975 0 0 0-1.673-2.526c-.518-.412-.755-1.117-.485-1.695Z"/><path stroke="#fff" stroke-linecap="round" stroke-width="2.5" d="M13 11V7"/></svg>
          <p class="notranslate">${LisioTranslationController.current.getTranslation("disable")}</p>
          <svg width="25" aria-hidden="true" height="30" viewBox="0 0 25 30" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_107_31" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="15" y="3" width="4" height="7"><path d="M16.4695 6.79946C16.4419 6.61533 16.4846 6.42754 16.5891 6.27346C16.6936 6.11937 16.8523 6.01028 17.0336 5.9679C17.2149 5.92552 17.4055 5.95294 17.5675 6.04473C17.7295 6.13651 17.851 6.28592 17.9079 6.46322C17.9358 6.57327 17.9372 6.68839 17.9119 6.79908C17.8866 6.90977 17.8354 7.01286 17.7624 7.09984C17.6894 7.18682 17.5968 7.25519 17.4922 7.29932C17.3875 7.34345 17.2739 7.36207 17.1607 7.35363C16.9982 7.35936 16.8391 7.30657 16.7122 7.20486C16.5854 7.10316 16.4993 6.9593 16.4695 6.79946ZM16.8369 3.10083C14.6451 3.31876 15.274 9.90656 17.4596 9.70731C19.6451 9.50805 19.0847 3.10083 16.9365 3.10083H16.8556" fill="white"/></mask><g mask="url(#mask0_107_31)"><path d="M14.6787 3.10874L14.6292 10.0264L19.7037 10.0627L19.7532 3.14505L14.6787 3.10874Z" fill="url(#paint0_linear_107_31)"/></g><mask id="mask1_107_31" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="29"><path d="M1.6875 12.086C3.24416 13.3313 7.78339 16.0088 10.741 16.0026C10.3488 15.7971 9.49572 13.5119 9.49572 13.35C9.58912 13.5866 10.4795 15.7659 11.2828 16.2329C11.2129 16.2489 11.1422 16.2614 11.0711 16.2703C10.8649 16.2996 10.6566 16.312 10.4484 16.3077H10.2429C6.84939 16.3077 1.89298 12.4347 1.7124 12.0798M20.3924 7.91413C19.9503 7.04863 19.2093 3.46208 19.365 2.87677C19.8008 3.35 20.7846 7.49072 20.6476 8.26905L20.3924 7.91413ZM16.7435 0.242899C15.7596 0.426375 14.8074 0.751463 13.9166 1.20803C13.0059 1.12453 12.1155 0.888796 11.2828 0.510645C10.3674 1.65635 11.6937 3.69869 8.62398 3.0013C8.60712 3.21505 8.64573 3.42952 8.73606 3.62397C9.80705 5.48574 7.75225 4.52061 7.12959 5.28026C8.62398 6.52559 8.37492 6.99259 6.82448 8.10093C9.75101 9.17814 7.97019 10.4359 7.59659 10.629C10.0872 11.482 9.53308 10.9527 9.50194 13.3375C6.53806 9.95647 3.35001 12.6153 0.280273 10.3674C1.09596 13.9664 4.21552 17.6464 7.66508 17.472C8.28774 17.3973 9.3276 17.2354 9.92535 17.1607C11.0211 16.9576 12.151 17.0478 13.2006 17.4222C13.2566 17.4222 19.3525 21.4571 17.8394 24.7759C16.8556 28.1819 11.1894 28.35 10.6352 24.695C10.0125 22.4471 13.9291 20.2678 14.8942 22.4658C15.4671 23.5617 14.6016 25.0686 13.3562 24.1906C11.8183 23.6302 11.756 25.604 13.1445 25.8407C16.756 26.7373 17.416 21.8556 14.9004 20.5418C9.47081 18.3375 7.086 26.1458 12.1358 28.3002C15.6352 29.9191 19.6078 26.9365 20.8531 23.1072C22.3351 15.7784 16.4945 15.0125 15.2491 11.5754C17.4038 11.7523 19.5443 12.0727 21.6564 12.5343C22.9328 12.9639 23.2628 11.9116 23.9851 11.015C23.1196 10.3238 21.8743 9.63891 21.1022 8.817C21.3201 7.6962 20.4795 2.47204 19.2342 2.29769C18.4621 2.72733 18.9602 4.52061 19.2716 5.56668C20.2678 10.9901 15.3924 12.1918 14.9814 6.2703C14.3587 6.03991 11.4758 5.02497 10.2367 6.46955C10.2181 6.48876 10.1959 6.50403 10.1712 6.51446C10.1466 6.52489 10.1202 6.53027 10.0935 6.53027C10.0668 6.53027 10.0403 6.52489 10.0157 6.51446C9.99109 6.50403 9.96884 6.48876 9.95026 6.46955C10.3674 4.51438 14.3089 5.51687 14.9814 5.81575C15.0623 3.94776 15.8407 2.47204 17.2105 2.70243C16.7747 2.12335 17.4409 0.292712 17.4409 0.292712C17.2865 0.241324 17.1241 0.218124 16.9615 0.224219C16.8893 0.21237 16.8157 0.21237 16.7435 0.224219" fill="white"/></mask><g mask="url(#mask1_107_31)"><path d="M0.209809 0.000913364L-0.00366211 29.832L23.9247 30.0033L24.1382 0.172144L0.209809 0.000913364Z" fill="url(#paint1_linear_107_31)"/></g><defs><linearGradient id="paint0_linear_107_31" x1="-0.50061" y1="6.70008" x2="25.2248" y2="6.88417" gradientUnits="userSpaceOnUse"><stop offset="0.05" stop-color="#81BB27"/><stop offset="0.05" stop-color="#81BB27"/><stop offset="0.21" stop-color="#37B37B"/><stop offset="0.35" stop-color="#00ADBA"/><stop offset="0.63" stop-color="#2853A1"/><stop offset="0.64" stop-color="#2753A0"/><stop offset="0.74" stop-color="#125980"/><stop offset="0.83" stop-color="#065D6D"/><stop offset="0.89" stop-color="#015E66"/><stop offset="1" stop-color="#015E66"/></linearGradient><linearGradient id="paint1_linear_107_31" x1="-0.268706" y1="14.8174" x2="25.1806" y2="14.9995" gradientUnits="userSpaceOnUse"><stop offset="0.05" stop-color="#81BB27"/><stop offset="0.05" stop-color="#81BB27"/><stop offset="0.21" stop-color="#37B37B"/><stop offset="0.35" stop-color="#00ADBA"/><stop offset="0.63" stop-color="#2853A1"/><stop offset="0.64" stop-color="#2753A0"/><stop offset="0.74" stop-color="#125980"/><stop offset="0.83" stop-color="#065D6D"/><stop offset="0.89" stop-color="#015E66"/><stop offset="1" stop-color="#015E66"/></linearGradient></defs></svg>
      </button>
    `;
  }
}

export { LisioDisableBannerController, styles };