export class Utils {
  static createLabel(content: string) {
    return this.createHTMLElement("label", {
      innerHTML: content,
      style: {
        textTransform: "uppercase",
        fontSize: "0.8rem",
        opacity: "0.7",
        display: "block",
        marginBottom: "0.4rem",
      },
    });
  }

  static heading(tag = "h1", content: string) {
    return this.createHTMLElement(tag, {
      innerHTML: content,
      style: {
        fontSize: "1.2rem",
        display: "block",
        marginBottom: "0.4rem",
      },
    });
  }
  static formGroup() {
    return this.createHTMLElement("div", { classList: ["form-group"] });
  }
  static spaceBetweenGroup() {
    return this.createHTMLElement("div", {
      classList: ["d-flex", "justify-content-between", "align-items-center"],
    });
  }
  static trashIcon() {
    const icon = this.createHTMLElement("i", {
      classList: ["bi", "bi-trash", "text-danger"],
      style: { cursor: "pointer" },
    });
    return icon;
  }

  static createPlayer(parent: HTMLElement, value: string) {
    const player = document.createElement("audio");
    player.src = value;
    player.controls = true;
    player.setAttribute("style", "width: 100%");
    player.setAttribute("controlsList", "nodownload");

    parent.appendChild(player);
  }

  static card() {
    return this.createHTMLElement("div", { classList: ["card"] });
  }
  static ul() {
    return this.createHTMLElement("ul", { classList: ["list-group"] });
  }

  static listItem(tag = "li") {
    return this.createHTMLElement(tag, { classList: ["list-group-item"] });
  }

  static cardBody() {
    return this.createHTMLElement("div", { classList: ["card-body"] });
  }

  static cardHeader() {
    return this.createHTMLElement("div", { classList: ["card-header"] });
  }
  static cardFooter() {
    return this.createHTMLElement("div", { classList: ["card-footer"] });
  }

  static createHTMLElement(
    tagName: string,
    options: {
      classList?: string[];
      innerHTML?: string;
      style?: Record<string, string>;
    }
  ) {
    const element = document.createElement(tagName);
    if (options.classList) {
      element.classList.add(...options.classList);
    }
    if (options.innerHTML) {
      element.innerHTML = options.innerHTML;
    }
    if (options.style) {
      Object.assign(element.style, options.style);
    }
    return element;
  }

  div(className: string) {
    const div = document.createElement("div");
    div.classList.add(className);
    return div;
  }
}