import { html, LitElement, css } from "lit";
import { customElement, queryAssignedElements } from "lit/decorators.js";
import { Modal } from "@supersoniks/concorde/core/components/ui/modal/modal";
import { HTML } from "@supersoniks/concorde/utils";
import { Button } from "../button/button";
const tagName = "sonic-modal-actions";
@customElement(tagName)
export class ModalActions extends LitElement {
  static styles = [
    css`
      :host {
        display: flex;
        gap: 0.5rem;
        margin-top: auto;
        padding-top: 1.5rem;
      }
    `,
  ];

  @queryAssignedElements({ selector: "sonic-button" })
  buttons!: Array<Button>;

  firstUpdated(changedProperties: Map<string | number | symbol, unknown>) {
    this.buttons?.forEach((btn) => {
      if (btn.hasAttribute("hideModal")) {
        btn.addEventListener("click", () => {
          const parentModal = HTML.getClosestElement(
            this,
            "sonic-modal"
          ) as Modal;
          parentModal?.hide();
        });
      }
    });
    super.firstUpdated(changedProperties);
  }
  render() {
    return html`<slot></slot>`;
  }
}