import { LitElement, html } from "lit";
import { template } from "./template";

export class QuickActionsMenu extends LitElement {
  render() {
    return html`${template(this)}`;
  }

  firstUpdated(p) {
    super.firstUpdated(p);
    // Escuchar por cambios en el contenido del slot
    const slot = this.shadowRoot?.querySelector('slot[name="anchor"]');
    slot?.addEventListener("slotchange", this.handleSlotChange.bind(this));
  }

  handleSlotChange(event) {
    const slot = event.target;
    const assignedElements = slot.assignedElements();

    // Si hay algún elemento asignado al slot
    if (assignedElements.length > 0) {
      const element = assignedElements[0]; // Asumimos que el primer elemento es el botón
      if (element.id === "usage-anchor") {
        // Añadir el listener de evento
        element.addEventListener("click", this._handleOpenMenu.bind(this));
      }
    }
  }

  _handleOpenMenu(e) {
    // Obtener el otro slot (target-slot)
    const contentSlot = this.shadowRoot?.querySelector('slot[name="content"]') as HTMLSlotElement;

    const actionMenu = this.querySelector("dss-action-menu");

    // Obtener los elementos asignados al otro slot
    const assignedElements = contentSlot?.assignedElements();
    if (assignedElements[0])
      this._addMenuCustomStyle(contentSlot as HTMLElement, actionMenu as HTMLElement);

    // Hacer target al elemento que deseas (por ejemplo, un <p>)
    const targetElement = assignedElements.find((el) => el.id === "content");
    if (targetElement) {
      // Modificar el contenido o estilo del elemento
      targetElement.show();
    }
  }

  _addMenuCustomStyle(contentSlot: HTMLElement, actionMenu: HTMLElement) {
    contentSlot.style.borderRadius = "var(--dss-radius-sm)";
    const list = actionMenu.shadowRoot?.querySelector("ul");
    if (list) list.style.overflow = "hidden";
  }
}