document.addEventListener("DOMContentLoaded", function () {
  new PostcoderBank({
    apikey: "PCW45-12345-12345-1234X",
    sortcode: "#txt_sortcode", // query selector of the sortcode input field
    accountnumber: "#txt_accountnumber", // query selector of the accountnumber input field
    submitbtn: "#btn_submit" // query selector of the submit button
  });
});

class PostcoderBank {
  constructor(config) {
    this.config = config;
    this.init();
  }

  init() {
    this.endpoint =
      "https://ws.postcoder.com/pcw/" + this.config.apikey + "/bank/";

    this.sortcode_input = document.querySelector(this.config.sortcode);
    this.accountnumber_input = document.querySelector(
      this.config.accountnumber
    );
    this.submit_btn = document.querySelector(this.config.submitbtn);

    // add click event listener to the submit button, to call the search function
    this.submit_btn.addEventListener("click", this.search);

    // add a result container to the page, delete when not required.
    this.resultcontainer = document.createElement("pre");
    this.submit_btn.closest("form").appendChild(this.resultcontainer);
  }

  search = (event) => {
    event.preventDefault();

    if (this.sortcode_input.value && this.accountnumber_input.value) {
      let self = this;
      let sortcode = this.sortcode_input.value;
      let accountnumber = this.accountnumber_input.value;

      fetch(this.endpoint, {
        method: "post",
        headers: {
          "Content-Type": "application/json"
        },
        body: `{"sortcode":"${sortcode}","accountnumber":"${accountnumber}"}`
      })
        .then((response) => {
          if (!response.ok) {
            throw response;
          }
          return response.json();
        })
        .then((data) => {
          self.processResult(data);
        })
        .catch((err) => {
          if (typeof err.text === "function") {
            err.text().then((errorMessage) => {
              console.log(
                "Postcoder request error " + err.status + " : " + errorMessage
              );
            });
          } else {
            console.log(err);
          }
        });
    }
  };

  processResult = (result) => {
    // show result on page, delete when not required.
    this.resultcontainer.classList.add("show");
    this.resultcontainer.innerHTML =
      "Result: \n\n" + JSON.stringify(result, null, 4);
  };
}