// retoor <retoor@molodetz.nl>
import { Component } from "./Component.js";

export class Chat extends Component {
  static tag = "dp-chat";

  setup() {
        this.log = document.createElement("div");
    this.log.className = "chat-log";
    this.log.setAttribute("aria-live", "polite");
    const form = document.createElement("form");
    form.className = "chat-form";
    this.input = document.createElement("textarea");
    this.input.rows = 2;
    this.input.setAttribute("aria-label", "Message");
    const send = document.createElement("button");
    send.type = "submit";
    send.className = "button small";
    send.textContent = "Send";
    form.append(this.input, send);
    form.addEventListener("submit", (event) => {
      event.preventDefault();
      const text = this.input.value.trim();
      if (text) {
        this.emit("dp-chat-send", { text });
        this.input.value = "";
      }
    });
    this.append(this.log, form);
  }

  addMessage(author, text) {
    const item = document.createElement("div");
    item.className = "chat-line";
    const who = document.createElement("strong");
    who.textContent = author;
    const body = document.createElement("span");
    body.textContent = ` ${text}`;
    item.append(who, body);
    this.log.append(item);
    this.log.scrollTop = this.log.scrollHeight;
  }
}