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

  async connectedCallback() {
    const id = this.getAttribute("data-id");
    const type = this.getAttribute("data-type");
    const label = this.getAttribute("data-label") || "";
    const customClass = this.getAttribute("data-class") || "";
    const validation = this.getAttribute("data-validation") || "";
    const description = this.getAttribute("data-description") || "";
    const placeholder = this.getAttribute("data-placeholder") || "";
    const value = this.getAttribute("data-value") || "";

    const isRequired =
      (this.getAttribute("data-isrequired") || "true") == "true";
    const isReadonly =
      (this.getAttribute("data-isreadonly") || "false") == "true";
    const padding = this.getAttribute("data-padding") || "0";

    const date = `${new Date().getFullYear()}-${String((new Date().getMonth()) +1).padStart(2, '0')}-${String(new Date().getDate()).padStart(2, '0')}`;
    const input = document.createElement("div");
    input.innerHTML = /*html*/ `
        <div class="_input_holder" style="padding: ${padding}">
          <label class="_input_label ${
            isRequired ? "_required_label" : ""
          }">${label}</label>
          <div class="_input_description">${description}</div>
          <input value="${value}" max="${type=='date'? date: ""}" class="_input_text __input ${
      isRequired ? "_required" : ""
    } ${customClass}" data-validation = "${validation}" placeholder="${placeholder}" id="${id}" type="${type}" ${
      isReadonly ? "readonly" : ""
    } />
    <div class="_input_error_text"></div>
        </div>
      `;

    this.appendChild(input);
  }
}

window.customElements.define("input-element", inputElement);