/**
 * ボタン押下時にジオコーディングを実行します
 */
document.getElementById("submitButton").onclick = function () {
  // ジオコーディングAPIにリクエストを送信します
  fetch(makeURI(), {
    // YourApiKey部分をお客様のAPIキーに修正してください
    // 例 "x-api-key": "6QHCWbbsnQ1K08IcwP",
    headers: { "x-api-key": "YourApiKey", accept: "application/json" }
  })
    .then((response) => {
      // ジオコーディングAPIのレスポンスコードを解析します
      analyzeResponseCode(response.status);
      return response.json();
    })
    .then((result) => {
      // 住所正規化結果を解析して表示します
      getNormalized(result);
    })
    .catch((error) => {
      // エラー時の処理を記載します
      // alert(error);
    });
};

/**
 * ジオコーディングAPI用のURIを作成します
 * @return {string} ジオコーディングAPI用のURI
 */
function makeURI() {
  const urlValue =
    "https://api-anorm.mapfan.com/v1/" +
    document.getElementById("anormInput").value +
    // ジオコーディングが不要な場合は「.json」を使用してください
    ".geojson";
  return encodeURI(urlValue);
}

/**
 * ジオコーディングAPIのレスポンスコードを解析し、表示・エラー出力を行います
 * @param {string} responseCode ジオコーディングAPIのレスポンスコード
 */
function analyzeResponseCode(responseCode) {
  document.getElementById("status").innerHTML = responseCode;

  // 200以外のレスポンスコードはエラーです
  if (responseCode == "200")
    document.getElementById("errorMessage").innerHTML = "";
  else if (responseCode == "400")
    document.getElementById("errorMessage").innerHTML =
      "住所入力が行われているか確認してください";
  else if (responseCode == "403")
    document.getElementById("errorMessage").innerHTML =
      "JavaScriptのAPIキーが正しいか確認してください";
  else
    document.getElementById("errorMessage").innerHTML =
      "システムエラーが発生しました";
}

/**
 * 住所正規化結果を解析し表示します
 * @param {json} result ジオコーディングAPIの住所正規化結果
 */
function getNormalized(result) {
  // 一件目の住所正規化結果を取得します
  // 複数件リクエストした場合は複数件取得する処理に変更します
  const feature = result.features[0];

  // 経度,緯度
  if (feature.geometry != null) {
    document.getElementById("coordinates").innerHTML =
      feature.geometry.coordinates;
  }

  // 入力住所文字列
  document.getElementById("query").innerHTML = feature.properties.query;
  // 正規化後の住所文字列
  document.getElementById("placeName").innerHTML =
    feature.properties.place_name;
  // 都道府県名
  document.getElementById("pref").innerHTML = feature.properties.pref;
  // 都道府県読み
  document.getElementById("prefKana").innerHTML = feature.properties.pref_kana;
  // 市区町村名
  document.getElementById("city").innerHTML = feature.properties.city;
  // 市区町村読み
  document.getElementById("cityKana").innerHTML = feature.properties.city_kana;
  // 町域名
  document.getElementById("area").innerHTML = feature.properties.area;
  // 町域名読み
  document.getElementById("areaKana").innerHTML = feature.properties.area_kana;
  // 小字・丁目
  document.getElementById("koazaChome").innerHTML =
    feature.properties.koaza_chome;
  // 小字・丁目読み
  document.getElementById("koazaChomeKana").innerHTML =
    feature.properties.koaza_chome_kana;
  // 番地・号
  document.getElementById("banchiGo").innerHTML = feature.properties.banchi_go;
  // 建物名称部
  document.getElementById("building").innerHTML = feature.properties.building;
  // 建物数字部
  document.getElementById("buildingNumber").innerHTML =
    feature.properties.building_number;
  // 郵便番号
  document.getElementById("zipcode").innerHTML = feature.properties.zipcode;
  // 解析レベル
  document.getElementById("geocodingLevel").innerHTML =
    feature.properties.geocoding_level;
  // 解析レベル説明
  document.getElementById("geocodingLevelDesc").innerHTML =
    feature.properties.geocoding_level_desc;
  // 解析ログメッセージ
  document.getElementById("log").innerHTML = feature.properties.log;
  // 正規化できなかった文字列
  document.getElementById("notNormalized").innerHTML =
    feature.properties.not_normalized;
}