var inputs = [];

inputs.push({ fn: "name", fl: "Your name", ft: "input", fr: true });
inputs.push({ fn: "email", fl: "Email", ft: "input", fr: true });
inputs.push({ fn: "postcode", fl: "Postcode", ft: "input", fr: true });
inputs.push({ fn: "phone", fl: "Phone", ft: "input", fr: true });
inputs.push({ fn: "message", fl: "Message", ft: "textarea" });
inputs.push({ fn: "photos", fl: "Attach photos", ft: "file" });
inputs.push({
  fn: "send",
  fl: "SEND",
  ft: "button",
  fc: () => amzgfSubmitForm(),
});

var parentEl;

function amzgel(k) {
  if ((e = document.getElementById(k))) return e;
  return false;
}

function amzgfInit() {
  var style = document.createElement("style");
  style.type = "text/css";
  style.innerHTML =
    '#amzgf div.amzgRequiredError input[type="text"], #amzgf div.amzgRequiredError textarea { border: 1px solid red;} .amzgRequired span:after { content: "*"; color: red; } #amzgMessage { text-align: center; font-weight: bold; margin: 10px; font-size: 1.2rem;} #amzgfephotos input { display: none; } #amzgfephotos button{ margin-bottom: 20px; background: none; border: 0; color: navy; font-size: 1.3rem; display: block; } #amzgfephotos div { display: inline-block; margin: 0 20px 20px 0; text-align: center;} #amzgfephotos div button{ font-size: 0.9rem; margin: auto; }';
  document.getElementsByTagName("head")[0].appendChild(style);

  var formEl = document.createElement("div");
  formEl.id = "amzgForm";

  var divEl = document.createElement("div");
  divEl.id = "amzgMessage";
  divEl.style.display = "none";
  parentEl.appendChild(divEl);

  var sdivEl = document.createElement("div");
  sdivEl.id = "amzgStatus";
  sdivEl.style.display = "none";
  parentEl.appendChild(sdivEl);

  inputs.map((inp, key) => {
    var divEl = document.createElement("div");
    divEl.id = "amzgfe" + inp.fn;

    divEl.classList.add("amzgs" + inp.ft);

    if (inp.fr) divEl.classList.add("amzgRequired");

    if (inp.ft !== "button" && inp.ft !== "file" && inp.ft !== "textarea") {
      var spanEl = document.createElement("span");
      spanEl.innerHTML = inp.fl;
      divEl.appendChild(spanEl);
    }
    if (inp.ft === "file") {
      var inputEl = document.createElement("input");
      inputEl.setAttribute("type", "file");
      //inputEl.setAttribute("multiple", "true");
      inputEl.addEventListener("change", amzgLoadFile);

      var btnEl = document.createElement("button");
      btnEl.id = "attachPhotosBtn";
      btnEl.addEventListener("click", function () {
        amzgel("amzgffphotos").click();
      });
      btnEl.innerHTML = "+ Attach photo";
      divEl.appendChild(btnEl);
    } else var inputEl = document.createElement(inp.ft);
    inputEl.id = "amzgff" + inp.fn;
    if (inp.ft !== "button") inputEl.placeholder = inp.fl;
    else {
      inputEl.innerHTML = inp.fl;
      inputEl.onclick = inp.fc ? inp.fc : null;
      inputEl.classList.add("btn");
    }

    if (inp.ft === "input") inputEl.setAttribute("type", "text");
    if (inp.ft === "input") divEl.classList.add("c_input");
    if (inp.ft === "input") inputEl.classList.add("stinput");
    if (inp.ft === "textarea") divEl.classList.add("c_text");
    if (inp.ft === "button") divEl.classList.add("c_send");

    divEl.appendChild(inputEl);
    formEl.appendChild(divEl);
  });
  parentEl.appendChild(formEl);
}

function amzgLoadFile(event) {
  var reader = new FileReader();
  reader.onload = function () {
    // Resize the image

    var image = document.createElement("img");
    image.src = reader.result;
    image.classList.add("amzgphotoupld");
    image.style.display = "none";

    image.addEventListener(
      "load",
      function (imageEvent) {
        var aspectRatio = 1;

        var width = 1024;
        var height = 1024;

        var tmbwidth = 100;
        var tmbheight = 100;

        if (image.width > image.height) {
          aspectRatio = image.width / image.height;

          height = Math.round(width / aspectRatio);

          tmbwidth = Math.round(tmbheight * aspectRatio);
        } else {
          aspectRatio = image.height / image.width;

          width = Math.round(height / aspectRatio);

          tmbwidth = Math.round(tmbheight / aspectRatio);
        }

        var canvas = document.createElement("canvas");

        canvas.width = width;
        canvas.height = height;
        canvas.getContext("2d").drawImage(image, 0, 0, width, height);
        var dataUrl = canvas.toDataURL("image/png");
        image.height = tmbheight;
        image.width = tmbwidth;
        image.src = dataUrl;
        image.style = "display: inline-block; width: auto !important;";
      },
      { once: true }
    );

    var imgBlock = document.createElement("div");
    var imgRmBtn = document.createElement("button");
    imgRmBtn.innerHTML = "remove";
    imgRmBtn.className = "pic_remove";
    imgRmBtn.addEventListener("click", function () {
      this.parentElement.parentElement.removeChild(this.parentElement);
      amzgel("attachPhotosBtn").innerHTML = "+ Attach photos";
    });

    imgBlock.appendChild(image);
    imgBlock.appendChild(imgRmBtn);

    amzgel("amzgfephotos").appendChild(imgBlock);

    amzgel("attachPhotosBtn").innerHTML = "+ Attach more photos";
  };

  Object.keys(event.target.files).map((fileId, index) => {
    if (event.target.files[index].type.substring(0, 6) === "image/")
      reader.readAsDataURL(event.target.files[index]);
  });
}

function amzgfSubmitForm() {
  var errors = 0;
  inputs.map((inp, key) => {
    if (inp.fr && amzgel("amzgffname").value !== "=-=-") {
      var fld = amzgel("amzgff" + inp.fn);

      if (!fld.value) {
        fld.parentElement.classList.add("amzgRequiredError");
        errors = errors + 1;
      } else fld.parentElement.classList.remove("amzgRequiredError");
    }
  });

  if (errors) {
    amzgfShowError("Please fill all required fields.");
  } else {
    amzgfShowError("");
    amzgfSendRequest();
  }
}

function amzgShow(elId) {
  amzgel(elId).style.display = "block";
}

function amzgHide(elId) {
  amzgel(elId).style.display = "none";
}

function amzgfSendRequest() {
  amzgShow("amzgMessage");
  amzgel("amzgMessage").innerHTML = "Sending...";
  amzgHide("amzgForm");

  var xhr = new XMLHttpRequest();
  var url = "https://amzg.uk/f/s/";
  xhr.open("POST", url, true);
  xhr.setRequestHeader("Content-Type", "application/json");
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var json = JSON.parse(xhr.responseText);

      if (json.log) console.log(json.log);

      if (json.alert) alert(json.alert);

      if (json.error != "") {
        amzgHide("amzgMessage");
        amzgShow("amzgForm");
        amzgfShowError(json.error);
      } else if (json.message) {
        amzgel("amzgMessage").innerHTML = json.message;
      } else {
        amzgfShowError(
          "Your request can not be sent right now. Please call us."
        );
      }
    }
  };

  var valphotos = new Array();

  document.querySelectorAll(".amzgphotoupld").forEach((item, index) => {
    var photosrc = item.src;

    valphotos.push(item.src);
    // console.log(item.src);
    // valphotos = { ...valphotos, [index]: item.src };
  });

  var valdata = {
    p: valphotos,
    ref: document.getElementById("amzgf").getAttribute("ref"),
  };

  inputs.map((inp) => {
    valdata = { ...valdata, [inp.fn]: amzgel("amzgff" + inp.fn).value };
  });

  var data = JSON.stringify(valdata);
  xhr.send(data);
}

function amzgfShowError(msg = "") {
  var divEl = amzgel("amzgMessage");
  divEl.innerHTML = msg;
  divEl.style.display = msg ? "block" : "none";
}

if ((parentEl = document.getElementById("amzgf")) && !amzgel('amzgForm')) {
  amzgfInit(parentEl);
}