const privacyPolicy = document.getElementById('privacy-policy');
const loginpage = document.querySelector(".login-main-title");
const verifyPage = document.querySelector("#kc-page-title");

if (privacyPolicy) {
  privacyPolicy.innerHTML = '<span>By signing up you agree to the <a href="https://buyersform.com/privacy/" target="_blank">BuyersForm Privacy Policy</a></span>'
}

// function createLabel(details) {
//   const label = document.createElement("label");
//   label.className = "custom-input-label";

//   if (details.innerHtml) {
//     label.innerHTML = details.innerHtml;
//   }

//   if (details.textContent) {
//     label.textContent = details.textContent;
//   }
//   label.for = details.for;

//   return label;
// }

if (loginpage) {
  // inject labels on login page;
  const signUpLink = document.querySelector("#new-to-app + a");

  signUpLink.textContent = "Sign up";

  // const emailWrapper = document.querySelector(
  //   'div.form-group:has(input[id="username"])'
  // );
  // const emailLabel = createLabel({ for: "username", textContent: "Email" });
  // // emailWrapper.prepend(emailLabel);

  // // <--- Password -->
  // const passwordWrapper = document.querySelector(
  //   'div.form-group:has(input[id="password"])'
  // );
  // const passwordLabel = createLabel({ for: "password", textContent: "Password" });
  // // passwordWrapper.prepend(passwordLabel);
}

if (verifyPage.textContent.includes("Email verification")) {
  const checkmark = `<svg xmlns="http://www.w3.org/2000/svg" width="117" height="117" fill="none"><path stroke="#0559FA" stroke-linecap="round" stroke-linejoin="round" stroke-width="10" d="M107.25 54.015V58.5a48.75 48.75 0 1 1-28.909-44.557"/><path stroke="#0559FA" stroke-linecap="round" stroke-linejoin="round" stroke-width="10" d="M107.25 19.5 58.5 68.299 43.875 53.674"/></svg>`;
  const style = document.createElement("style");
  style.innerHTML = `
    .login-pf-page  #kc-content-wrapper {
      margin-top: 0 !important;
    }
    .alert-warning.pf-c-alert {
      display: none !important;
    }

    #kc-content-wrapper > .instruction {
      text-align: center !important;
      font-family: DM Sans, sans-serif !important;
      font-size: 14px !important;
      font-weight: 400 !important;
      line-height: 18px !important;
      color: #A8A6A7 !important;
    }

    #resendLinkBtn {
      color: #fff !important;
      text-decoration: none !important;
      width: 100% !important;
      display: block !important;
      margin: 20px 0 0 !important;
      padding: 12px !important;
    }
  `;

  document.head.appendChild(style);

  const headerWrapper = document.getElementsByClassName("login-pf-header")[0];
  const headerH1 = document.querySelector("#kc-page-title");

  const svgWrapper = document.createElement("div");
  svgWrapper.id = "svg-wrapper";

  svgWrapper.innerHTML = checkmark;

  headerWrapper.prepend(svgWrapper);
  headerH1.textContent = "Verify Account";

  const description = document.querySelector(
    "#kc-content-wrapper > .instruction"
  );
  description.textContent = "We’ve emailed you a link to verify your account!";

  const linkNode = document.querySelector("#kc-info-wrapper > .instruction");
  const childNodesArr = Array.from(linkNode.childNodes);

  childNodesArr.forEach((child) => {
    if (child.tagName !== "A") {
      linkNode.removeChild(child);
    }
  });

  const linkBtn = document.querySelector("#kc-info-wrapper > .instruction a");
  linkBtn.id = "resendLinkBtn";
  linkBtn.textContent = "Resend Link";
}