class ButtonElement extends HTMLElement {
  constructor() {
    super();
  }

  async connectedCallback() {
    const id = this.getAttribute("data-id") || "";
    const label = this.getAttribute("data-label") || "";
    const icon = this.getAttribute("data-icon") || "";
    const isOutlined =
      (this.getAttribute("data-isoutlined") || "false") == "true";
    const backgroundColor =
      this.getAttribute("data-backgroundcolor") || "#00A2AD";
    const color = this.getAttribute("data-color") || "#fff";
    const size = this.getAttribute("data-size") || "24";
    const height = this.getAttribute("data-height") || "47px";
    const margin = this.getAttribute("data-margin") || "16px 0 0 0";
    const isHoverEffect = (this.getAttribute("data-ishovereffect") || "true") == "true"

    const input = document.createElement("div");

    input.innerHTML = /*html*/ `
        <button class="button__container ${isHoverEffect ? "button__container_hover" : ""}" style="height: ${height}; background-color: ${
          isOutlined ? "transparent" : backgroundColor
        }; color: ${color}; border: 1px solid ${backgroundColor}; stroke: ${backgroundColor}; margin: ${margin}" id="${id}">
          ${
            icon
              ? icon.includes("getIcon.")
                ? `<span class="_button_icon">${getIcon(
                    icon.replace("getIcon.", ""),
                    isOutlined ? backgroundColor : color,
                    size,
                    size
                  )}</span>`
                : `<img class="_button_icon" src='${icon}' />`
              : ""
          }
          <span class="_button_font">${label}</span>
        </button>
      `;

    this.appendChild(input);
  }
}

window.customElements.define("button-element", ButtonElement);