// retoor <retoor@molodetz.nl>

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

const CSS_ID = "ai-confirm-css";

export class AiConfirm extends Component {
  static get observedAttributes() {
    return ["name", "label", "help", "confirm-label", "reject-label", "default", "required", "disabled"];
  }

  constructor() {
    super();
    this._value = null;
  }

  _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-confirm.css");
    document.head.appendChild(link);
  }

  connectedCallback() {
    this._ensureCss();
    if (this._built) return;
    this._built = true;
    this.classList.add("ai-confirm");
    const name = this.attr("name", "confirm");
    const label = this.attr("label", "Confirm");
    const yes = this.attr("confirm-label", "Yes");
    const no = this.attr("reject-label", "No");
    const def = this.getAttribute("default");
    this._value = def === "true" ? true : def === "false" ? false : null;
    this.innerHTML = "";
    const title = document.createElement("div");
    title.className = "ai-widget-label";
    title.textContent = label;
    this.appendChild(title);
    if (this.attr("help")) {
      const help = document.createElement("div");
      help.className = "ai-widget-help";
      help.textContent = this.attr("help");
      this.appendChild(help);
    }
    const group = document.createElement("div");
    group.className = "ai-confirm-options";
    group.setAttribute("role", "radiogroup");
    group.setAttribute("aria-label", label);
    for (const [val, text] of [
      [true, yes],
      [false, no],
    ]) {
      const btn = document.createElement("button");
      btn.type = "button";
      btn.className = "ai-confirm-option";
      btn.textContent = text;
      btn.dataset.value = String(val);
      if (this._value === val) btn.classList.add("selected");
      btn.addEventListener("click", () => {
        this._value = val;
        group.querySelectorAll(".ai-confirm-option").forEach((el) => el.classList.remove("selected"));
        btn.classList.add("selected");
        this.dispatchEvent(
          new CustomEvent("ai:change", {
            bubbles: true,
            composed: true,
            detail: { name, value: val },
          })
        );
        const shell = this.closest("ai-interaction");
        if (shell && typeof shell.submit === "function") {
          const fields = shell.querySelectorAll(
            "ai-confirm, ai-choice, ai-choice-multi, ai-field, ai-select"
          );
          if (fields.length === 1) shell.submit();
        }
      });
      group.appendChild(btn);
    }
    this.appendChild(group);
  }

  getValue() {
    return this._value;
  }

  validate() {
    if (this.boolAttr("required") && this._value === null) {
      return { valid: false, message: `${this.attr("label", "Confirm")} is required` };
    }
    return { valid: true };
  }
}

if (!customElements.get("ai-confirm")) {
  customElements.define("ai-confirm", AiConfirm);
}

export default AiConfirm;
