class PongoLauncher_42af3be340975ce42e2af117dd113ec1 {
  constructor(position, color, icon, url, hasWiggle, hasBadge, size) {
    this.position = position
    this.color = color
    this.icon = icon
    this.url = url
    this.currentState = '0'
    this.timeoutId = null
    this.container = null
    this.frame = null
    this.ifrmContainer = null
    this.hasWiggle = hasWiggle
    this.hasBadge = hasBadge
    this.size = size ?? 1
  }

  #buildWidget() {
    this.currentState = localStorage.getItem('heypongo-widget-display')
    if (!this.currentState) {
      this.currentState = '0'
      localStorage.setItem('heypongo-widget-display', this.currentState)
    }

    this.container = document.createElement('div')
    const globalStyles = document.createElement('style')

    const wiggleAnimation = `
    @keyframes ping {
        75%, 100% {
          transform: scale(2);
          opacity: 0;
        }
      }
      @keyframes wiggle {
          0% { transform: rotate(0deg); }
         80% { transform: rotate(0deg); }
         85% { transform: rotate(5deg); }
         95% { transform: rotate(-5deg); }
        100% { transform: rotate(0deg); }
      }
    `
    const widgetGlobalStyle = `
    :root {
      --scale: ${this.size}
    }

    @media screen and (max-width: 768px) {
      :root {
        --scale: 1
      }
    }

    @keyframes scale-in-center {
      0% {
        transform: scale(0);
        opacity: 1;
      }
      100% {
        transform: scale(var(--scale));
        opacity: 1;
      }
    }
    @keyframes fade-in-bottom {
      0% {
        transform: translateY(50px);
        opacity: 0;
      }
      100% {
        transform: translateY(0);
        opacity: 1;
      }
    }
    @keyframes fade-out-bottom {
      0% {
        transform: translateY(0);
        opacity: 1;
      }
      100% {
        transform: translateY(50px);
        opacity: 0;
      }
    }
    `

    globalStyles.innerHTML = this.hasWiggle ? `${widgetGlobalStyle}${wiggleAnimation}` : widgetGlobalStyle;

    const containerStyle = `
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 100%;
    transition: transform 0.16s linear 0s, opacity 0.08s linear 0s;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
    `

    this.container.appendChild(globalStyles)

    const widget = document.createElement('div')
    widget.setAttribute('id', 'web-launcher')
    widget.style.cssText = `
      position: fixed;
      z-index: 2147483003;
      width: 60px;
      height: 60px;
      transform: scale(var(--scale));
      border-radius: 50%;
      background: #${this.color};
      cursor: pointer;
      box-shadow: rgb(0 0 0 / 6%) 0px 1px 6px 0px, rgb(0 0 0 / 16%) 0px 2px 32px 0px;
      animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    `
    widget.style.cssText += this.#getWidgetPosition()
    this.container.appendChild(widget)

    const widgetPingAnimation = document.createElement('div')
    widgetPingAnimation.style.cssText = `
      position: absolute;
      width: 43px;
      opacity: 0.75;
      height: 43px;
      border-radius: 50%;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      user-select: none;
      background: #${this.color};
      cursor: pointer;
    `
    widgetPingAnimation.style.animation = this.currentState === '0' ? 'ping 2s cubic-bezier(0, 0, 0.2, 1) infinite' : 'none'
    widget.appendChild(widgetPingAnimation)

    const imgContainer = document.createElement('div')
    imgContainer.style.cssText = containerStyle
    imgContainer.style.opacity = this.currentState === '0' ? '1' : '0'
    imgContainer.style.transform = this.currentState === '0' ? 'rotate(0deg) scale(1)' : 'rotate(30deg) scale(0)'
    widget.appendChild(imgContainer)

    const caretContainer = document.createElement('div')
    caretContainer.style.cssText = containerStyle
    caretContainer.style.opacity = this.currentState === '0' ? '0' : '1'
    caretContainer.style.transform = this.currentState === '0' ? 'rotate(-60deg)' : 'rotate(0deg)'
    widget.appendChild(caretContainer)

    const icon = document.createElement('img')
    icon.src = this.icon
    icon.style.width = '40px'
    icon.style.height = '40px'
    icon.style.animation = 'wiggle 1s infinite'
    icon.setAttribute('alt', 'launcher-image')
    imgContainer.appendChild(icon)

    const caret = document.createElementNS("http://www.w3.org/2000/svg", "svg")
    caret.setAttribute("viewBox", "0 0 16 14")
    caret.setAttribute("width", "16");
    caret.setAttribute("height", "25")
    caret.innerHTML = `
    <path fill="#ffffff" fill-rule="evenodd" clip-rule="evenodd" d="M.116 4.884l1.768-1.768L8 9.232l6.116-6.116 1.768 1.768L8 12.768.116 4.884z"></path>
    `
    caretContainer.appendChild(caret)

    this.ifrmContainer = document.createElement('div')
    this.ifrmContainer.style.cssText = `
      position: fixed;
      box-shadow: rgba(0, 0, 0, 0.16) 0px 5px 40px;
    `
    this.ifrmContainer.style.opacity = this.currentState
    this.ifrmContainer.style.right = '-9192929px'

    const ifrm = document.createElement("iframe")
    ifrm.setAttribute("src", this.url)
    ifrm.style.cssText = `
      width: 100%;
      border: 0;
      position: relative;
      z-index: 0;
    `
    this.ifrmContainer.appendChild(ifrm)

    const closeBtn = document.createElement('div')
    closeBtn.style.cssText = `
      z-index: 2147483005;
      position: absolute;
      border-radius: 8px 8px 0 0;
      width: 100%;
      height: 3rem;
      top: 0px;
      right: 0px;
      background-position: center center;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: end;
      padding-right: 0.8rem;
    `

    if (this.hasBadge) {
      const badge = document.createElement("div");
      badge.style.cssText = `
        position: absolute;
        top: -3px;
        right: -3px;
        background-color: #E84435;
        border-radius: 50%;
        min-width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: sans-serif;
        font-size: 11px;
        color: white;`;
      badge.style.opacity = this.currentState === "0" ? "1" : "0";
      badge.textContent = 1;
      widget.appendChild(badge);
    }

    const closeBtnIcon = document.createElement('div')
    closeBtnIcon.style.cssText = `
      width: 25px;
      height: 25px;
      background: white;
      border-radius: 8px;
      display: flex;
      align-items: center;
      transform: translateZ(0px);
      transition: background-color 200ms ease 0s;
    `
    closeBtnIcon.innerHTML = `
    <svg  focusable="false" aria-hidden="true" style="margin: 0px auto;width: 12px;height: 12px;cursor: pointer;"><g stroke="none" stroke-width="1" fill-rule="evenodd"><g transform="translate(-340.000000, -32.000000)" fill="#000000"><polygon points="350.656537 44 346 39.343463 341.343463 44 340 42.656537 344.656537 38 340 33.343463 341.343463 32 346 36.656537 350.656537 32 352 33.343463 347.343463 38 352 42.656537"></polygon></g></g></svg>
    `
    closeBtn.appendChild(closeBtnIcon)
    document.body.appendChild(this.ifrmContainer)
    ifrm.onload = () => {
      this.ifrmContainer.style.display = this.currentState === '0' ? 'none' : 'block'
      this.ifrmContainer.appendChild(closeBtn)
      this.#setIframeStyle(this.ifrmContainer, ifrm, widget, closeBtn)
      document.body.appendChild(this.container)
      widget.addEventListener("click", () => this.#toggleVisibility(this.ifrmContainer, caretContainer, imgContainer, widgetPingAnimation, widget))
      closeBtn.addEventListener("click", () => this.#toggleVisibility(this.ifrmContainer, caretContainer, imgContainer, widgetPingAnimation, widget))
      window.addEventListener('resize', () => this.#setIframeStyle(this.ifrmContainer, ifrm, widget, closeBtn))
    }

  }

  #getWidgetPosition() {
    if (this.hasWiggle) {
      switch (this.position) {
        case 'top-right':
          return `
            top: calc(20px*(var(--scale)*var(--scale)));
            right: calc(20px*(var(--scale)*var(--scale)));
          `
        case 'top-left':
          return `
            top: calc(20px*(var(--scale)*var(--scale)));
            left: calc(20px*(var(--scale)*var(--scale)));
          `
        case 'bottom-left':
          return `
            bottom: calc(20px*(var(--scale)*var(--scale)));
            left: calc(20px*(var(--scale)*var(--scale)));
          `
        default:
          return `
            bottom: calc(20px*(var(--scale)*var(--scale)));
            right: calc(20px*(var(--scale)*var(--scale)));
          `
        }
      } else {
      switch (this.position) {
        case 'top-right':
          return `
            top: calc(20px*var(--scale));
            right: calc(20px*var(--scale));
          `
        case 'top-left':
          return `
            top: calc(20px*var(--scale));
            left: calc(20px*var(--scale));
          `
        case 'bottom-left':
          return `
            bottom: calc(20px*var(--scale));
            left: calc(20px*var(--scale));
          `
        default:
          return `
            bottom: calc(20px*var(--scale));
            right: calc(20px*var(--scale));
          `  
      }

    }
  }

  #setIfrmContainerPosition(ifrmContainer) {
    switch (this.position) {
      case 'top-right':
        ifrmContainer.style.top = 'calc(60px*var(--scale) + 2*20px)'
        ifrmContainer.style.right = '20px'
        ifrmContainer.style.bottom = ''
        ifrmContainer.style.left = ''
        break
      case 'top-left':
        ifrmContainer.style.top = 'calc(60px*var(--scale) + 2*20px)'
        ifrmContainer.style.left = '20px'
        ifrmContainer.style.bottom = ''
        ifrmContainer.style.right = ''
        break
      case 'bottom-left':
        ifrmContainer.style.bottom = 'calc(60px*var(--scale) + 2*20px)'
        ifrmContainer.style.left = '20px'
        ifrmContainer.style.top = ''
        ifrmContainer.style.right = ''
        break
      default:
        ifrmContainer.style.bottom = 'calc(60px*var(--scale) + 2*20px)'
        ifrmContainer.style.right = '20px'
        ifrmContainer.style.top = ''
        ifrmContainer.style.left = ''
        break
    }
  }

  #setIframeStyle(ifrmContainer, ifrm, widget, closeBtn) {
    closeBtn.style.display = 'flex'
    if("matchMedia" in window) {
      if(window.matchMedia("(max-width:450px)").matches) {
        ifrmContainer.style.bottom = '0'
        ifrmContainer.style.right = '0'
        ifrmContainer.style.left = '0'
        ifrmContainer.style.top = '0'
        ifrmContainer.style.height = '100dvh'
        ifrmContainer.style.width = '100%'
        ifrmContainer.style.minHeight = '100dvh'
        ifrmContainer.style.maxHeight = 'none'
        ifrmContainer.style.overflow = 'hidden'
        ifrmContainer.style.zIndex = '2147483001'
        ifrmContainer.style.borderRadius = '0'

        ifrm.style.borderRadius = '0'
        ifrm.style.height = 'calc(100% - 3rem)'

        widget.style.display = this.currentState === '0' ? 'block' : 'none'

      } else {
        this.#setIfrmContainerPosition(ifrmContainer)
        ifrmContainer.style.height = 'calc(100% - (60px*var(--scale)) - 60px)'
        ifrmContainer.style.width = '396px'
        ifrmContainer.style.minHeight = '250px'
        ifrmContainer.style.maxHeight = '704px'
        ifrmContainer.style.zIndex = '9999'
        ifrmContainer.style.borderRadius = '8px'

        ifrm.style.borderRadius = '8px'
        ifrm.style.height = '100%'
        ifrm.style.marginTop = '0'

        widget.style.display = 'block'
      }
    }
  }

  #toggleVisibility(ifrmContainer, caretContainer, imgContainer, widgetPingAnimation, widget) {
    const fadeInAnimation = 'fade-in-bottom 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both'
    const fadeOutAnimation = 'fade-out-bottom 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both'

    if (this.currentState === '0') {
      if (this.timeoutId !== null) {
        clearTimeout(this.timeoutId)
      }
      ifrmContainer.style.animation = fadeInAnimation
      ifrmContainer.style.opacity = '1'
      ifrmContainer.style.display = 'block'

      caretContainer.style.opacity = '1'
      caretContainer.style.transform = 'rotate(0deg)'

      imgContainer.style.opacity = '0'
      imgContainer.style.transform = 'rotate(30deg) scale(0)'
      widgetPingAnimation.style.animation = 'none'
      if(window.matchMedia("(max-width:450px)").matches) {
        widget.style.display = 'none'
      }
    } else {
      ifrmContainer.style.animation = fadeOutAnimation
      ifrmContainer.style.opacity = '0'
      this.timeoutId = setTimeout(() => ifrmContainer.style.display = 'none', 400)

      caretContainer.style.opacity = '0'
      caretContainer.style.transform = 'rotate(-60deg)'

      imgContainer.style.opacity = '1'
      imgContainer.style.transform = 'rotate(0deg) scale(1)'

      widgetPingAnimation.style.animation = 'ping 2s cubic-bezier(0, 0, 0.2, 1) infinite'
      widget.style.display = 'block'
    }
    this.currentState = ifrmContainer.style.opacity
    localStorage.setItem('heypongo-widget-display', ifrmContainer.style.opacity)
  }

  init() {
    const messageHandler = (event) => {
      if (event.data === '3pc.supported') {
        this.#buildWidget();
        window.removeEventListener('message', messageHandler);
      }
    };
    window.addEventListener('message', messageHandler);
    this.frame = document.createElement('iframe');
    this.frame.src = "https://elreco.github.io/3rd-party-cookies-checker/read-localstorage.html";
    this.frame.sandbox = "allow-scripts allow-same-origin";
    this.frame.style.display = "none";
    document.body.appendChild(this.frame);
  }

  destroy() {
    localStorage.setItem('heypongo-widget-display', 0)
    document.body.removeChild(this.container);
    document.body.removeChild(this.frame);
    document.body.removeChild(this.ifrmContainer);
  }
}

const pongoLauncher_42af3be340975ce42e2af117dd113ec1 = new PongoLauncher_42af3be340975ce42e2af117dd113ec1('bottom-left', '212B59', 'https://static.heypongo.com/api/gift-icon.png', 'https://shop.heypongo.com/welcome/kanata', true, true, 1)
document.onload = pongoLauncher_42af3be340975ce42e2af117dd113ec1.init()