const showLoader = (text) => {
  const scrim = document.getElementById("scrim-loader");
  const loader = document.getElementById("scrim-loader-loader");
  document.body.classList.add("loading");
  window.scroll({
    top: 0,
    left: 0,
    behavior: "instant",
  });
  loader.text = text;
  scrim.hidden = false;
};

const hideLoader = () => {
  const scrim = document.getElementById("scrim-loader");
  const loader = document.getElementById("scrim-loader-loader");
  document.body.classList.remove("loading");
  loader.text = "";
  scrim.hidden = true;
};

const dataFromForm = () => {
  const dateRange = document.getElementById("request-range");
  const data = Object.fromEntries(new FormData(requestForm));
  data["state"] = data["state"] == "Select..." ? "" : data["state"];
  data["request-start"] = dateRange.value[0];
  data["request-end"] = dateRange.value[1];
  data["request-addresses"] = Storage.getItem("request-addresses");
  return data;
};

const formatPhone = (val) => {
  val = val.replace(/\D/g, "");
  const area = val.substr(0, 3);
  const phone1 = val.substr(3, 3);
  const phone2 = val.substr(6, 4);
  let phone = "";
  if (area != "") {
    phone = `(${area}`;
  }
  if (area.length == 3) {
    phone += ")";
  }
  if (phone1 != "") {
    phone += ` ${phone1}`;
  }
  if (phone1.length == 3) {
    phone += "-";
  }
  if (phone2 != "") {
    phone += phone2;
  }
  return phone;
};

const validatePhone = (evt) => {
  const target = evt.target;
  const value = target.value;
  if (value == "") {
    target.status = "idle";
    return;
  }
  const isValid = /^\(\d{3}\)\s\d{3}\-\d{4}$/.test(value);
  if (isValid) {
    target.status = "valid";
    return;
  }
  target.status = "invalid";
};

const validateEmail = (evt) => {
  const target = evt.target;
  const value = target.value;
  if (value == "") {
    target.status = "idle";
    return;
  }
  const emailRegex =
    /^([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x22([^\x0d\x22\x5c\x80-\xff]|\x5c[\x00-\x7f])*\x22)(\x2e([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x22([^\x0d\x22\x5c\x80-\xff]|\x5c[\x00-\x7f])*\x22))*\x40([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x5b([^\x0d\x5b-\x5d\x80-\xff]|\x5c[\x00-\x7f])*\x5d)(\x2e([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x5b([^\x0d\x5b-\x5d\x80-\xff]|\x5c[\x00-\x7f])*\x5d))*$/;
  if (emailRegex.test(value)) {
    target.status = "valid";
    return;
  }
  target.status = "invalid";
};

const validateDigits = (evt) => {
  const target = evt.target;
  const value = target.value;
  if (value == "") {
    target.status = "idle";
    return;
  }
  const minLength = target.getAttribute("min-length");
  const maxLength = target.getAttribute("max-length");
  const valLength = value.length;
  const isValid =
    /^[0-9]+$/.test(value) && minLength <= valLength && valLength <= maxLength;
  if (isValid) {
    target.status = "valid";
    return;
  }
  target.status = "invalid";
};

const phoneFormatter = (evt) => {
  if (evt.type === "keypress" && !/^[0-9]$/i.test(evt.key)) {
    evt.preventDefault();
    return;
  }
  evt.target.value = formatPhone(evt.target.value);
  validatePhone(evt);
};

const digitsOnly = (evt) => {
  if (evt.type === "keypress" && !/^[0-9]$/i.test(evt.key)) {
    evt.preventDefault();
    return;
  }
  validateDigits(evt);
};

let addressInput,
  canvas,
  cityInput,
  emailInput,
  extInput,
  faxInput,
  phoneInput,
  requestForm,
  screenResize,
  stateInput,
  submit,
  unitInput,
  zipInput;

var captchaSuccess = function () {
  document.getElementById("captcha-block").status = "valid";
  validateForm();
};

var captchaExpired = function () {
  document.getElementById("captcha-block").status = "invalid";
  validateForm();
};

var captchaFailed = function () {
  document.getElementById("captcha-block").status = "invalid";
  validateForm();
};

let autocomplete;

(async () => {
  // Address autocomplete
  await customElements.whenDefined("calcite-input-text");
  const mailingAddress = document.getElementById("mailing-address");
  await mailingAddress.componentOnReady();
  autocomplete = new google.maps.places.Autocomplete(mailingAddress, {
    componentRestrictions: { country: ["us"] },
    fields: ["address_components"],
    types: ["address"],
  });
  autocomplete.addListener("place_changed", fillAddress);
})();

(async () => {
  await customElements.whenDefined("calcite-modal");
  await document.querySelector("calcite-modal").componentOnReady();
  requestForm = document.getElementById("request-form");
  requestForm.onsubmit = (e) => {
    e.preventDefault();
  };

  requestForm.addEventListener("keypress", (evt) => {
    if (evt.key == "Enter") {
      evt.preventDefault();
    }
  });

  submit = document.getElementById("submit");
  await submit.componentOnReady();
  submit.addEventListener("click", async () => {
    const data = dataFromForm();
    const { href } = document.getElementById("submit-records-request-url");
    showLoader();
    const response = await post(href, data);
    const responseData = await response.json();
    hideLoader();
    console.log(responseData);
    const status = responseData.status;
    const success = status == "Success";
    const msg = responseData.msg;
    const kind = success ? "success" : "danger";
    const modal = document.getElementById("submit-request-modal");
    const notice = document.getElementById("submit-response-notice");
    const title = document.getElementById("submit-response-title");
    const message = document.getElementById("submit-response-message");
    title.textContent = status;
    message.innerHTML = msg;
    notice.kind = kind;
    notice.icon = success ? "check-circle" : "exclamation-mark-triangle";
    modal.open = true;
    if (success) {
      const locations = JSON.parse(data["request-addresses"]);
      const formattedLocations = new Array();
      for (const location of Object.keys(locations)) {
        formattedLocations.push({
          address: location,
          facilities: locations[location],
        });
      }
      data["request-addresses"] = formattedLocations;
      logAction({
        action: "records request submission",
        form_data: data,
      });
      modal.addEventListener("calciteModalBeforeClose", () => {
        parent.document.querySelector("#iframe-popup .close").click();
      });
    } else {
      grecaptcha.reset();
    }
  });
})();

(async () => {
  await customElements.whenDefined("calcite-input-text");
  addressInput = document.getElementById("mailing-address");
  unitInput = document.getElementById("apt-unit");
  cityInput = document.getElementById("city");
  stateInput = document.getElementById("state");
  phoneInput = document.getElementById("phone");
  faxInput = document.getElementById("fax");
  extInput = document.getElementById("extension");
  zipInput = document.getElementById("zip-code");
  emailInput = document.getElementById("email");
  await addressInput.componentOnReady();
  addressInput.addEventListener("calciteInputTextChange", (evt) => {
    if (!evt.target.value) {
      for (const field of [unitInput, cityInput, stateInput, zipInput]) {
        field.value = "";
      }
    }
  });
  const inputEvents = [
    "keypress",
    "calciteInputTextChange",
    "calciteInputChange",
  ];

  for (const event of inputEvents) {
    phoneInput.addEventListener(event, phoneFormatter);
    faxInput.addEventListener(event, phoneFormatter);
    extInput.addEventListener(event, digitsOnly);
    zipInput.addEventListener(event, digitsOnly);
    emailInput.addEventListener(event, validateEmail);
  }
})();

const requestAddresses = JSON.parse(Storage.getItem("request-addresses"));
const requestList = new Array();

(async () => {
  await customElements.whenDefined("calcite-block");
  // Build list of requesting properties
  const propertiesBlock = document.getElementById("request-properties-block");
  await propertiesBlock.componentOnReady();
  if (Object.keys(requestAddresses).length == 1) {
    propertiesBlock.heading = "Requesting property:";
  }
  for (const address of Object.keys(requestAddresses)) {
    const li = document.createElement("li");
    const content = document.createElement("calcite-action");
    content.icon = "pin-tear";
    content.text = address;
    content.textEnabled = true;
    content.tabIndex = -1;
    li.appendChild(content);
    document.getElementById("request-properties").appendChild(li);
  }
  // Add contact info block validation listener
  const contactInfo = document.getElementById("contact-info-block");
  await contactInfo.componentOnReady();
  for (const input of contactInfo.querySelectorAll("calcite-input")) {
    for (const event of ["calciteInputChange", "calciteInputInput"]) {
      input.addEventListener(event, verifyContactInfo);
    }
  }
  for (const input of contactInfo.querySelectorAll("calcite-input-text")) {
    for (const event of ["calciteInputTextChange", "calciteInputTextInput"]) {
      input.addEventListener(event, verifyContactInfo);
    }
  }
})();

(async () => {
  await customElements.whenDefined("calcite-input-date-picker");
  const dateRange = document.getElementById("request-range");
  await dateRange.componentOnReady();
  dateRange.max = new Date().toISOString().slice(0, 10);
  dateRange.addEventListener(
    "calciteInputDatePickerChange",
    verifyRequestedRecords
  );
})();

async function verifyContactInfo() {
  try {
    const addressFields = ["mailing-address", "city", "state", "zip-code"];
    const nonAddressContacts = ["phone", "fax", "email"];
    const block = document.getElementById("contact-info-block");
    // If any input is invalid, block is invalid
    for (const input of block.querySelectorAll(
      "calcite-input, calcite-input-text"
    )) {
      if (input.status == "invalid") {
        block.status = "invalid";
        return;
      }
    }
    // If all address fields filled in, block is valid
    let addressFilled = true;
    for (const addrID of addressFields) {
      const input = document.getElementById(addrID);
      if (input.value == "") {
        addressFilled = false;
        break;
      }
    }
    if (addressFilled) {
      block.status = "valid";
      return;
    }
    // If phone, fax, or email provided, block is valid
    for (const contactId of nonAddressContacts) {
      const input = document.getElementById(contactId);
      if (input.value != "") {
        block.status = "valid";
        return;
      }
    }
    // Else block is invalid
    block.status = "invalid";
  } catch (e) {
    console.log(e);
  } finally {
    validateForm();
  }
}

async function verifyRequestedRecords() {
  const dateRange = document.getElementById("request-range");
  try {
    if (dateRange.value[0] && dateRange.value[1]) {
      dateRange.closest("calcite-block").status = "valid";
    } else {
      dateRange.closest("calcite-block").status = "invalid";
    }
  } catch (e) {
    console.log(e);
  } finally {
    validateForm();
  }
}

async function validateForm() {
  // Check if all form blocks have status of valid;
  // if all valid, enable submit button; else disable it.
  if (grecaptcha.getResponse() !== "") {
    document.getElementById("captcha-block").status = "valid";
  }
  for (const block of document.querySelectorAll("form > calcite-block")) {
    await block.componentOnReady();
    if (block.status != "valid") {
      submit.disabled = true;
      submit.kind = "danger";
      submit.iconStart = "exclamation-mark-triangle";
      return;
    }
  }
  submit.disabled = false;
  submit.kind = "brand";
  submit.iconStart = "check-circle";
  return;
}

async function resetRange() {
  const rangeID = "request-range";
  document.getElementById(rangeID).remove();
  const newRange = document.createElement("calcite-input-date-picker");
  newRange.range = true;
  newRange.id = rangeID;
  newRange.name = rangeID;
  document.getElementById("request-range-label").appendChild(newRange);
}

function fillAddress() {
  const place = autocomplete.getPlace();
  let address = "";
  let zipcode = "";
  for (const component of place.address_components) {
    const componentType = component.types[0];

    switch (componentType) {
      case "street_number": {
        address = `${component.long_name} ${address}`;
        break;
      }
      case "route": {
        address += component.short_name;
        break;
      }
      case "postal_code": {
        zipcode = `${component.long_name}${zipcode}`;
        break;
      }
      case "locality": {
        cityInput.value = component.long_name;
        break;
      }
      case "administrative_area_level_1": {
        stateInput.value = component.short_name;
        break;
      }
    }
    addressInput.value = address;
    zipInput.value = zipcode;
  }
  verifyContactInfo();
  unitInput.focus();
}