// retoor <retoor@molodetz.nl>

import { Component } from "./Component.js";
import { assetUrl } from "../assetVersion.js";

const CSS_ID = "ai-actions-css";

export class AiActions extends Component {
  static get observedAttributes() {
    return ["align", "sticky", "submit-label", "cancel-label", "cancelable"];
  }

  _ensureCss() {
    if (document.getElementById(CSS_ID)) return;
    const link = document.createElement("link");
    link.id = CSS_ID;
    link.rel = "stylesheet";
    link.href = assetUrl("/static/css/components/ai-interaction.css");
    document.head.appendChild(link);
  }

  connectedCallback() {
    this._ensureCss();
    if (this._built) return;
    this._built = true;
    this.classList.add("ai-actions");
    if (this.attr("align") === "end") this.classList.add("align-end");
    this.innerHTML = "";
    if (this.hasAttribute("cancelable")) {
      const cancel = document.createElement("button");
      cancel.type = "button";
      cancel.className = "ai-btn ai-btn-secondary";
      cancel.dataset.aiCancel = "1";
      cancel.textContent = this.attr("cancel-label", "Cancel");
      this.appendChild(cancel);
    }
    if (!this.hasAttribute("submit-hidden")) {
      const submit = document.createElement("button");
      submit.type = "button";
      submit.className = "ai-btn ai-btn-primary";
      submit.dataset.aiSubmit = "1";
      submit.textContent = this.attr("submit-label", "Confirm");
      this.appendChild(submit);
    }
  }
}

if (!customElements.get("ai-actions")) {
  customElements.define("ai-actions", AiActions);
}

export default AiActions;
