window.GRV5.event.subscribe("onScreenRender", () => {
  // Tabs for Phone
  const headerPhone = document.createElement("div");
  headerPhone.className = "tabs";
  headerPhone.style.display = "block";
  headerPhone.innerHTML = `
    <ul class="tabs__list" role="tablist">
        <li class="tabs__item">
            <a href="#" class="tabs__link  is-active" aria-selected="false" role="tab" onclick="window.GRV5.screen.show('forgotPasswordByPhoneNumber');">手机号找回</a></li><li class="tabs__item"><a href="#" id="phone-tab" class="tabs__link" aria-selected="false" role="tab" onclick="window.GRV5.screen.show('forgotPassword');">邮件找回</a>
        </li>
    </ul>`;

  // Tabs for Email
  const headerEmail = document.createElement("div");
  headerEmail.className = "tabs";
  headerEmail.style.display = "block";
  headerEmail.innerHTML = `
    <ul class="tabs__list" role="tablist">
        <li class="tabs__item">
            <a href="#" class="tabs__link" aria-selected="false" role="tab" onclick="window.GRV5.screen.show('forgotPasswordByPhoneNumber');">手机号找回</a></li><li class="tabs__item"><a href="#" id="email-tab" class="tabs__link is-active" aria-selected="false" role="tab" onclick="window.GRV5.screen.show('forgotPassword');">邮件找回</a>
        </li>
    </ul>`;

  // Add Tabs Phone
  let forgotPasswordByPhoneMainDiv = document.querySelector(
    `[id='forgotPasswordByPhoneNumber'] main div`
  );
  if (forgotPasswordByPhoneMainDiv) {
    forgotPasswordByPhoneMainDiv.insertBefore(
      headerPhone,
      forgotPasswordByPhoneMainDiv.children[0]
    );
  }

  // Add Tabs Email
  let forgotPasswordMainDiv = document.querySelector(
    `[id='forgotPassword'] main div`
  );
  if (forgotPasswordMainDiv) {
    forgotPasswordMainDiv.insertBefore(
      headerEmail,
      forgotPasswordMainDiv.children[0]
    );
  }
});

window.GRV5.event.subscribe("onScreenRender", () => {
  const login = document.querySelector('[id="signIn"] input[name="nextgenUsernameSignIn"]');
  if (!login) {
    return;
  }

  login.addEventListener("focusout", (event) => {
    const errorMessage = document.querySelector(
      "div[class=custom_login_error_message]"
    );
    if (errorMessage) {
      errorMessage.remove();
    }

    const loginValue = event.target.value;
    /* eslint-disable no-control-regex */
    const emailPartner =
      /^(?:[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-zA-Z0-9-]*[a-zA-Z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])$/;
    const phonePartner = /^\+[0-9]{2}-[0-9]{11}$/; // +86-12345678912

    if (loginValue) {
      const regexEmailPartner = RegExp(emailPartner);
      const regexPhonePartner = RegExp(phonePartner);
      if (regexEmailPartner.test(loginValue)) {
        updateHiddenLoginFields(loginValue, "");
      } else if (regexPhonePartner.test(loginValue)) {
        updateHiddenLoginFields("", loginValue);
      } else {
        const errorElement = document.createElement("div");
        errorElement.className = "custom_login_error_message";
        errorElement.innerHTML = `<div class="tip_error"> 请填写有效邮箱/手机号</div>`;
        login.parentNode.insertBefore(errorElement, login.nextSibling);
      }
    }
  });
});

function updateHiddenLoginFields(email, phone) {
  const emailHidden = document.querySelector(
    `[id='signIn'] input[schema='email'][type=hidden]`
  );
  if (emailHidden) {
    emailHidden.value = email;
  }

  const phoneHidden = document.querySelector(
    `[id='signIn'] input[schema='phoneNumberMobile'][type=hidden]`
  );
  if (phoneHidden) {
    phoneHidden.value = phone;
  }
}

window.GRV5.event.subscribe('onFormShow', (event) => {
  if (event.data.formId === 'reconsent') {
    document.querySelector(".grv_feedback_button").style.pointerEvents = "none";
    document.querySelector(".grv_feedback_button").style.opacity = "0.5";

    let reconsentCheckboxs = document.querySelectorAll('input[type="checkbox"]');
    reconsentCheckboxs.forEach(reconsentCheckbox => {
      reconsentCheckbox.addEventListener('click', (event) => {
        if ((document.getElementById("grv_sign_in_reconsent_nextReconsentCheckbox1").checked
        ) && (document.getElementById("grv_sign_in_reconsent_nextReconsentCheckbox2").checked)) {
          document.querySelector(".grv_feedback_button").style.pointerEvents = "";
          document.querySelector(".grv_feedback_button").style.opacity = "1";
        } else {
          document.querySelector(".grv_feedback_button").style.pointerEvents = "none";
          document.querySelector(".grv_feedback_button").style.opacity = "0.5";
        }
      });
    });
  }
});