class CountCalculator {
  constructor() {
    // count of the item
    this.count = 0;
    this.windowsillType;
    this.windowsillStrength;
    // collect form inputs/outputs

    this.lengthInput = document.getElementById("length-input");
    this.countOutput = document.getElementById("count-output");
    this.windowsillTypeInput = document.getElementById("windowsill-type-input");
    this.windowsillStrengthInput = document.getElementById(
      "windowsill-strength-input"
    );
    this.windowsillTypeOutput = document.getElementById(
      "windowsill-type-output"
    );
    this.windowsillStrengthInputContainer = document.getElementById(
      "windowsill-strength-input-container"
    );

    // listen for input changes
    this.lengthInput.addEventListener("change", (e) => {
      this.handleCountChange(e.target.value);
    });
    this.windowsillTypeInput.addEventListener("change", (e) => {
      this.handleWindowsillTypeChange(e.target.value);
    });
    this.windowsillStrengthInput.addEventListener("change", (e) => {
      this.handleWindowsillStrengthChange(e.target.value);
    });
    this.init();
  }

  init() {
    this.handleCountChange(this.lengthInput.value);
    this.handleWindowsillStrengthChange(this.windowsillStrengthInput.value);
    this.handleWindowsillTypeChange(this.windowsillTypeInput.value);
    this.updateOutput();
  }

  updateOutput() {
    this.countOutput.innerHTML = this.count;
    console.log(this.windowsillStrength, this.windowsillType);
    if (this.windowsillType === "custom") {
      this.windowsillTypeOutput.innerHTML = `Sondergröße: ${
        (this.windowsillStrength !== "" &&
          this.windowsillStrength + "er Lehre") ||
        ""
      }`;
    } else {
      this.windowsillTypeOutput.innerHTML = `${this.windowsillType}er Lehre`;
    }
  }

  handleCountChange(value) {
    this.count = this.calculateCount(value);
    this.updateOutput();
  }

  handleWindowsillTypeChange(value) {
    if (value === "custom") {
      this.windowsillStrengthInputContainer.style.display = "flex";
    } else {
      this.windowsillStrengthInputContainer.style.display = "none";
    }
    this.windowsillType = value;
    this.updateOutput();
  }

  handleWindowsillStrengthChange(value) {
    this.windowsillStrength = value;
    this.updateOutput();
  }

  calculateCount(length) {
    let count = length * 3;
    count = Math.ceil(count / 10) * 10;

    return count;
  }
}

new CountCalculator();