const changeButtonColor = (buttonPath, color) => {
  document.querySelector(buttonPath).style.border = `1px solid ${color}`;
  document
    .querySelectorAll(`${buttonPath} svg path`)
    .forEach((item) => (item.style.stroke = color));
};

const getApiLink = () => {
  if (
    window.location.origin.includes("localhost") ||
    window.location.origin.includes("file") ||
    window.location.origin.includes("127.0.0.1")
  ) {
    return "http://localhost";
  } else {
    return window.location.origin;
  }
};

const getWSLink = () => {
  if (
    window.location.origin.includes("localhost") ||
    window.location.origin.includes("file")
  ) {
    return "ws://localhost:8080";
  } else {
    return "ws://13.201.227.120:8088";
  }
};

const createAlertMessage = (
  elemClass,
  result,
  message = "Something Went Wrong",
  type,
  show_error = false
) => {
  const errorElem = document.querySelector(`.${elemClass}`);
  errorElem.innerHTML = "";
  const messageElem = document.createElement("alert-element");
  messageElem.setAttribute(
    "data-message",
    `${result ? result.message || result.status : message}<br>${
      result?.error && show_error ? result.error : ""
    }`
  );
  messageElem.setAttribute(
    "data-type",
    type || result?.success ? "info" : "error"
  );
  messageElem.setAttribute(
    "data-isclose",
    show_error && result?.error ? "false" : "true"
  );
  messageElem.setAttribute("data-container-class", elemClass);
  errorElem.appendChild(messageElem);
};

const startLoader = (elemClass) => {
  const holderElem = document.querySelector(`.${elemClass}`);
  holderElem.innerHTML = "";
  const loaderElem = document.createElement("loader-element");
  holderElem.appendChild(loaderElem);
};

const endLoader = (elemClass) => {
  const holderElem = document.querySelector(`.${elemClass}`);
  holderElem.innerHTML = "";
};

const setTimer = (viewElemClass, resendButtonClass, timeInSec = 60) => {
  const countdown = document.querySelector(`.${viewElemClass}`);
  const btn = document.querySelector(`.${resendButtonClass}`);
  btn.classList.add("_disabled");
  const interval = window.setInterval(() => {
    if (timeInSec > 0) timeInSec--;
    countdown.innerHTML = "in (" + timeInSec + " sec)";
    if (timeInSec <= 0) {
      btn.classList.remove("_disabled");
      countdown.innerHTML = "";
      clearInterval(interval);
    }
  }, 1000);
  return interval;
};

const setMessage = (targetElemClass, message) => {
  const elem = document.querySelector(`.${targetElemClass}`);
  elem.innerHTML = "";
  const messageElem = document.createElement("message-element");
  messageElem.setAttribute("data-message", message);
  elem.appendChild(messageElem);
};

const updateFieldValues = (json, section) => {
  if (section == "shareholder") {
    Object.keys(json).forEach((shareholder_id) => {
      const fields = json[shareholder_id]?.fields;
      const files = json[shareholder_id]?.files;
      if (fields) {
        Object.keys(fields).forEach((field) => {
          if (field != "Uid" && field != "Holding") {
            const elem = document.getElementById(
              `${section}#${shareholder_id}_${field}`
            );
            updateValue(elem, json[shareholder_id].fields[field]);
          }
        });
      }
      if (files) {
        Object.keys(files).forEach((field) => {
          renderFiles(
            null,
            `${section}#${shareholder_id}_${field}`,
            files[field]
          );
        });
      }
    });
  } else {
    if (json["fields"]) {
      Object.keys(json.fields).forEach((field) => {
        const elem = document.getElementById(`${section}_${field}`);
        updateValue(elem, json.fields[field]);
      });
    }
    if (json["files"]) {
      Object.keys(json.files).forEach((field) => {
        renderFiles(null, `${section}_${field}`, json.files[field]);
      });
    }
  }
};

const updateValue = (elem, val) => {
  if (elem.classList.contains("__radio")) {
    const radioInputs = elem.querySelectorAll("input");
    radioInputs.forEach((radioInput) => {
      if (radioInput.getAttribute("data-radio") == `radio${val}`) {
        radioInput.checked = true;
      }
    });
  } else if (elem.classList.contains("__checkbox")) {
    elem.checked = val == "1";
  } else if (elem.classList.contains("__select")) {
    elem.value = val || "not-selected";
  } else if (elem.classList.contains("__button")) {
    if (val == "1") {
      linkSentButtonChange(elem);
    }
  } else {
    if (elem.id == "companyDetails_DateOfInc") {
      const diff = differenceInYearsAndMonths(val);
      const vantageValue =
        diff.years != undefined && diff.months != undefined
          ? `${diff.years} Year ${diff.months} Month`
          : "";
      document.querySelector("#companyDetails_BusinessVantage").value =
        vantageValue;
    } else if (elem.id.includes("shareholder#") && elem.id.includes("_Dob")) {
      const diff = differenceInYearsAndMonths(val);
      const age = isNaN(diff.years) ? "" : diff.years;
      const id = elem.id.split("_")[0];
      if (document.getElementById(`${id}_Age`))
        document.getElementById(`${id}_Age`).value = age;
    }
    elem.value = val;
  }
};

const linkSentButtonChange = (elem) => {
  elem.classList.add("_disabled");
  elem.querySelector("._button_icon").src = "../../assets/images/tick.png";
  elem.querySelector(".button__container").style.backgroundColor =
    "transparent";
  elem.querySelector(".button__container").style.color = "#00A2AD";
  elem.querySelector("._button_font").innerHTML = "Link Sent";
  elem.querySelector(".button__container").style.cursor = "not-allowed";
  if (elem.id == "financialData_IsItrLinkSent") {
    document.querySelector("#financialData_ItrAcqPhoneNumber").readOnly = true;
    document.querySelector("#financialData_ItrAcqCompanyEmail").readOnly = true;
  }
  if (elem.id == "financialData_IsGstLinkSent") {
    document.querySelector("#financialData_GstAcqPhoneNumber").readOnly = true;
    document.querySelector("#financialData_GstAcqCompanyEmail").readOnly = true;
  }
};

function renderFiles(elem, id, files) {
  const filelist = document.getElementById(`filelist_${id.replace("#", "__")}`);
  filelist.innerHTML = "";

  Array.from(files).forEach((file, index) => {
    const fileItem = document.createElement("div");
    fileItem.classList.add("fileupload__fileitem");
    fileItem.innerHTML = `
            <div  class="fileupload__filename">${file.name}</div>
            <div><img class="fileupload__delete" data-uid="${file.id}" data-filename="${file.name}" src="../../assets/images/delete_trash.png"/></div>
          `;
    filelist.appendChild(fileItem);
  });

  const fileUploadEvent = new CustomEvent("AdjustAccordianHeight", {});
  window.dispatchEvent(fileUploadEvent);

  const deleteButtons = document.querySelectorAll(
    `#filelist_${id.replace("#", "__")} .fileupload__delete`
  );

  deleteButtons.forEach((button) => {
    button.addEventListener("click", (event) => {
      const uid = event.target.dataset.uid;

      const myHeaders = new Headers();
      myHeaders.append("Content-Type", "application/x-www-form-urlencoded");
      myHeaders.append("Authorization", localStorage.getItem("token"));

      const urlencoded = new URLSearchParams();
      urlencoded.append("uid", uid);
      urlencoded.append("field_id", id);

      const urlParams = new URLSearchParams(window.location.search);
      const application_id = urlParams.get("application_id");

      const requestOptions = {
        method: "POST",
        headers: myHeaders,
        body: urlencoded,
        redirect: "follow",
      };
      fetch(
        `${getApiLink()}/api/financing/delete_document.php?application_id=${application_id}`,
        requestOptions
      )
        .then((response) => {
          if (response.status == 401) {
            localStorage.setItem(
              "loginMessageRedirect",
              "Session Expired, please login again"
            );
            window.location.href = "/login";
          } else {
            return response.json();
          }
        })
        .then((result) => {
          if (result.success && result?.data?.files) {
            renderFiles(elem, id, result.data.files);
          } else {
            // Do Nothing
          }
        })
        .catch((error) => console.error(error));
    });
  });
}

const onLogout = () => {
  const myHeaders = new Headers();
  myHeaders.append("Content-Type", "application/x-www-form-urlencoded");
  myHeaders.append("Authorization", localStorage.getItem("token"));

  const requestOptions = {
    method: "POST",
    headers: myHeaders,
    redirect: "follow",
  };
  fetch(`${getApiLink()}/api/login/logout.php`, requestOptions)
    .then((response) => {
      if (response.status == 401) {
        localStorage.setItem(
          "loginMessageRedirect",
          "Session Expired, please login again"
        );
        window.location.href = "/login";
      } else {
        return response.json();
      }
    })
    .then((result) => {
      localStorage.removeItem("token");
      localStorage.setItem("loginMessageRedirect", "Successfully Logged Out");
      window.location.href = "/login";
    })
    .catch((error) => console.error(error));
};

function differenceInYearsAndMonths(passedDate) {
  if (!passedDate) {
    return {};
  }
  const date = passedDate.split("-");
  const startDate = new Date(date[0], date[1] - 1, date[2]);
  const endDate = new Date();
  const startUTC = new Date(
    Date.UTC(startDate.getFullYear(), startDate.getMonth(), startDate.getDate())
  );
  const endUTC = new Date(
    Date.UTC(endDate.getFullYear(), endDate.getMonth(), endDate.getDate())
  );
  let yearDiff = endUTC.getUTCFullYear() - startUTC.getUTCFullYear();
  let monthDiff = endUTC.getUTCMonth() - startUTC.getUTCMonth();
  if (monthDiff < 0) {
    yearDiff--;
    monthDiff += 12;
  }
  return { years: yearDiff, months: monthDiff };
}