// retoor <retoor@molodetz.nl>

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

const CSS_ID = "ai-group-css";

export class AiGroup extends Component {
  static get observedAttributes() {
    return ["label", "collapsed", "compact"];
  }

  _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-group");
    const legend = document.createElement("div");
    legend.className = "ai-group-label";
    legend.textContent = this.attr("label", "Group");
    this.insertBefore(legend, this.firstChild);
  }
}

if (!customElements.get("ai-group")) {
  customElements.define("ai-group", AiGroup);
}

export default AiGroup;
