/**
 * Push Box Component
 * A promotional container with logo, title, and CTA
 * Uses slots for all content to allow easy customization in HTML
 */
class PushBox extends HTMLElement {
  static get observedAttributes() {
    return ["background-color", "text-color"];
  }

  constructor() {
    super();
    this.attachShadow({ mode: "open" });
  }

  connectedCallback() {
    this.render();
    // Use requestAnimationFrame to ensure slots are assigned
    requestAnimationFrame(() => {
      this.updateLogoVisibility();
    });
  }

  attributeChangedCallback() {
    this.render();
    requestAnimationFrame(() => {
      this.updateLogoVisibility();
    });
  }

  updateLogoVisibility() {
    const logoSlot = this.shadowRoot?.querySelector('slot[name="logo"]');
    const logoWrapper = this.shadowRoot?.querySelector(".logo-wrapper");

    if (logoSlot && logoWrapper) {
      const assignedNodes = logoSlot.assignedNodes();
      const hasContent =
        assignedNodes.length > 0 &&
        assignedNodes.some((node) => {
          return node.nodeType === Node.ELEMENT_NODE && node.tagName === "IMG";
        });

      if (!hasContent) {
        logoWrapper.classList.add("hidden");
      } else {
        logoWrapper.classList.remove("hidden");
      }
    }
  }

  get backgroundColor() {
    return (
      this.getAttribute("background-color") ||
      "var(--color-push-box-bg, #EBEEF4)"
    );
  }

  get textColor() {
    return this.getAttribute("text-color") || "#951D51";
  }

  render() {
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
        }

        .push-box {
          background-color: ${this.backgroundColor};
          padding: 48px 16px;
          display: flex;
          flex-direction: column;
          gap: 16px;
          border-radius: 4px;
        }

        .logo-wrapper {
          display: block;
          margin-bottom: 32px;
        }

        .logo-wrapper.hidden {
          display: none;
        }

        .logo-wrapper ::slotted(img) {
          width: 104px;
          height: auto;
        }

        .title-wrapper ::slotted(*) {
          font-family: var(--font-family-outfit, "Outfit", sans-serif);
          font-size: 24px;
          font-weight: 700;
          line-height: 34px;
          color: #000000;
          margin: 0;
        }

        .cta-wrapper {
          color: #951D51;
          font-family: var(--font-family-outfit, "Outfit", sans-serif);
          font-size: 16px;
          font-weight: 400;
        }

        .cta-wrapper ::slotted(.cta-buttons) {
          display: flex;
          gap: 16px;
          flex-wrap: wrap;
        }
      </style>
      <div class="push-box">
        <div class="logo-wrapper">
          <slot name="logo"></slot>
        </div>
        <div class="title-wrapper">
          <slot name="title"></slot>
        </div>
        <div class="cta-wrapper">
          <slot name="cta"></slot>
        </div>
      </div>
    `;
  }
}

customElements.define("push-box", PushBox);