export class UtilInputGroup {

  /**
  * <div class="input-group mb-3">
  <div class="input-group-text">
    <input class="form-check-input mt-0" type="checkbox" value="">
  </div>
  <input type="text" class="form-control">
</div>
  * 
  * 
  */
  group: HTMLElement;
  groupText: HTMLElement;
  parent: HTMLElement;
  checkBox: HTMLInputElement;
  textBox: HTMLInputElement;
  item: any;
  checkKey: string;
  textBoxKey: string;

  constructor(
    parent: HTMLElement,
    item: any,
    checkKey: string,
    textBoxKey: string
  ) {
    this.parent = parent;
    this.item = item;
    this.checkKey = checkKey;
    this.textBoxKey = textBoxKey;
    this.group = this.createGroup();
    this.groupText = this.createInputGroupText();
    this.checkBox = this.createInput("checkbox", "");
    this.textBox = this.createInput("text", "");
    this.configure();
  }
  configure() {
    this.groupText.appendChild(this.checkBox);
    this.group.appendChild(this.groupText);
    this.group.appendChild(this.textBox);
    this.parent.appendChild(this.group);
  }
  createGroup() {
    const group = document.createElement("div");
    group.classList.add("input-group", "mb-3");
    return group;
  }
  createInputGroupText() {
    const groupText = document.createElement("div");
    groupText.classList.add("input-group-text");
    return groupText;
  }
  createInput(type: string, value: string) {
    const input = document.createElement("input");
    input.type = type;
    input.value = value as string;
    if (type === "checkbox") {
      input.checked = this.item[this.checkKey];
      input.classList.add("form-check-input", "mt-0");
      input.onchange = () => {
        this.item[this.checkKey] = input.checked;
      };
    } else {
      input.value = this.item[this.textBoxKey];
      input.classList.add("form-control");
      input.oninput = () => {
        this.item[this.textBoxKey] = input.value;
      };
    }
    return input;
  }
  setPlaceholder(text: string) {
    this.textBox.placeholder = text;
  }
}