mmSubmit();
function mmSubmit() {
  const idPref = "idc3mhm2";
  const errClass = idPref + "-error";
  const infoClass = idPref + "-info";
  const div = document.getElementById(idPref);
  const submitButtonId = "mmSubmit";
  div.innerHTML = '<!-- form --><form action="###" novalidate="novalidate"><dl><dt>Email Address</dt><dd><input id="idc3mhm2Email" type="email" name="email"></dd></dl><p>ご登録は<a href="https://cccmh.co.jp/member/" target="_blank">会員規約</a>に同意するものと見なします。</p><input type="checkbox" id="idc3mhm2Agree" name="agree"><label for="idc3mhm2Agree">「会員規約に同意する」</label><input id="mmSubmit" type="submit" value="登録する" disabled=""></form><!-- form -->';
  const cKey = 'mjNQNWfmgWmRZ0ZHrdRyLRYrP-JVL0tveAWo7IfreZQWCA0sHEBKYDuafvsW0Sdl';
  const form = div.querySelector("form");
  form.addEventListener('submit', function (e) {
    e.preventDefault();


    // ワーディングをクリア
    clearWording(form.getElementsByClassName(errClass));
    // メッセージをクリア
    clearWording(form.getElementsByClassName(infoClass));
    // 送信ボタンを非活性
    submitToggle(true);

    const xhrP = new XMLHttpRequest();
    xhrP.open('GET', 'https://id.cccmh.jp/client/mailmagazine?_ckey=' + cKey + '&client_id=PCCCMH0001');
    xhrP.withCredentials = true;
    xhrP.onload = function (e) {
      if (xhrP.readyState === 4 && xhrP.status === 200) {
        try {
          const rj = JSON.parse(xhrP.responseText);
          if (!rj || !rj.token) {
            throw "無効なデータを受信しました。";
          }

          const token = rj.token;
          let data = {};
          for (let fk in form.elements) {
            let fe = form.elements[fk];
            if (fe.type === "checkbox") {
              if (fe.checked) {
                data[fe.name] = fe.value;
              }
            } else if (fe.type === "email") {
              data['email'] = fe.value;
            }
          }

          data['client_id'] = "PCCCMH0001";
          data['_csrf'] = token;
          data['_ckey'] = cKey;

          let dataStr = "";
          for (let [k, v] of Object.entries(data)) {
            v = !!v ? encodeURIComponent(v) : "";
            dataStr += k + "=" + v + "&";
          }
          dataStr = dataStr.replace(/[&]$/, "");

          const xhr = new XMLHttpRequest();
          xhr.open('POST', 'https://id.cccmh.jp/client/mailmagazine');
          xhr.withCredentials = true;
          xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
          xhr.onload = function (e) {
            if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 400)) {
              if (xhr.status === 200) {
                // 送信ボタンを活性
                submitToggle(false);
                const rj = JSON.parse(xhr.responseText);
                if (!rj) {
                  throw "無効なデータを受信しました。";
                }
                if (rj.result) {
                  const msg = "ご入力いただいたメールアドレスに、認証URLを送信しました。<br>認証確認メールをご確認ください。";
                  // フォームを消してメッセージを表示する
                  form.remove()
                  div.innerHTML = '<div style="color: red;">' + msg + '</div>';
                } else {
                  for (let [ek, em] of Object.entries(rj.error)) {
                    let ekId = idPref + ek.charAt(0).toUpperCase() + ek.slice(1);
                    let fp = document.getElementById(ekId);
                    if (fp) {
                      let p = fp.parentNode;
                      let errMsg = document.createElement("div");
                      errMsg.setAttribute("class", errClass);
                      errMsg.setAttribute("style", "color: red;");
                      errMsg.innerText = em;
                      p.appendChild(errMsg);
                    }
                  }
                }
              }

              if (xhr.status === 400) {
                const msg = "セキュリティ上必要なパラメーターに異常がみつかりました、ページを再読み込み後に、もう一度お試しください。";
                form.remove()
                div.innerHTML = '<div style="color: red;">' + msg + '</div>';
              }
            }
          };
          xhr.send(dataStr);
        } catch (e) {
          console.log(e);
          let error = "データの取得に失敗しました。しばらくしてからやり直してください。";
          alert(error);
        }
      }
    };
    xhrP.send();


  });

  form.agree.addEventListener('change', function (e) {
    submitToggle(!!!form.agree.checked);
  });

  function clearWording(w) {
    for (let ww of w) {
      ww.parentNode.removeChild(ww);
    }
  }
  function submitToggle(bool) {
    const sb = document.getElementById(submitButtonId);
    sb.disabled = bool;
  }
}