document.addEventListener("DOMContentLoaded", function () {
  new PostcoderMobile({
    apikey: "PCW45-12345-12345-1234X",
    searchterm: "#txt_search", // query selector of the searchterm input field
    successindicator: "#successindicator", // query selector of the email valid/invalid indicator
    submitbutton: "#btn_validate" // query selector of the button that sends our request
  });
});

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

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

    this.submitbutton = document.querySelector(this.config.submitbutton);

    this.input = document.querySelector(this.config.searchterm);

    // add click event listener to the submit button, to call the validation function
    this.submitbutton.addEventListener("click", this.validate);

    // trigger on 'Enter' keypress too
    this.input.addEventListener("keypress", (event) => {
      if (event.key === "Enter") {
        event.preventDefault();
        this.validate();
      }
    });

    // create an empty div for the tick/cross and place it in the page
    this.successindicator = document.querySelector(
      this.config.successindicator
    );

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

  validate = (event) => {
    //remove previous mobile validity indicator
    this.successindicator.classList.remove("isvalid", "notvalid");

    if (this.input.value) {
      let self = this;
      let searchterm = this.input.value;

      // fetch the json formatted result from Postcoder and pass it to processResult
      fetch(this.endpoint + searchterm)
        .then((response) => {
          if (!response.ok) {
            throw response;
          }
          return response.json();
        })
        .then((json) => {
          self.processResult(json);
        })
        .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) => {
    // display the mobile validity indicator
    if (result.valid === true) {
      this.successindicator.classList.add("isvalid");
    } else {
      this.successindicator.classList.add("notvalid");
    }

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