$(function () {
  let ambassadorLists = $(".ambassador__lists");

  // アンバサダーの数を取得
  let ambassadorListLength = $(".js-ambassador-list").length;
  if (ambassadorListLength <= 4) {
    //ambassadorListLengthが4以下ならMoreボタンを非表示
    $(".js-ambassador-more").hide();
  } else {
    //ambassadorListLengthが5以上ならMoreボタンを表示
    $(".js-ambassador-more").show();
  }

  //////////////////////////////////////////////////////////////////////
  //////////////   モーダルの表示非表示   //////////////
  //////////////////////////////////////////////////////////////////////
  $(".js-ambassador-img").on("click", function () {
    $(this).parent().next().addClass("open");
    $("#js-overlay").addClass("open");
    $("body").addClass("noscroll");
  });
  $("#js-overlay, .js-ambassador-modal-close").on("click", function () {
    $(".js-ambassador-modal").removeClass("open");
    $("#js-overlay").removeClass("open");
    $("body").removeClass("noscroll");
  });

  //////////////////////////////////////////////////////////////////////
  //////////////   Moreボタンのアコーディオン開閉   //////////////
  //////////////////////////////////////////////////////////////////////
  //ページ読み込み時に実行
  ambassadorAccordionReset(ambassadorListLength);

  function ambassadorAccordionReset(ambassadorListLength) {
    // アンバサダー表示エリアの高さを取得
    let moreBtn = $(".js-ambassador-more");
    let moreText = $(".js-ambassador-more").children("span");
    if (ambassadorListLength >= 5) {
      ambassadorLists.addClass("close");
      moreBtn.removeClass("close_position").addClass("open_position");
      moreText.removeClass("close_link").addClass("open_link");
    } else {
      $(".js-ambassador-more").hide();
      ambassadorLists.css("height", "auto");
    }
  }

  $(".js-ambassador-more").on("click", function () {
    //Moreボタンをクリックでアコーディオンを開閉
    ambassadorListsHeightChange();
  });

  //アコーディオン開閉
  function ambassadorListsHeightChange() {
    //Moreボタンをクリックでアコーディオンを開閉
    let moreBtn = $(".js-ambassador-more")
    let moreText = $(".js-ambassador-more").children("span");
    ambassadorTop = $(".ambassador").offset().top;

    //開く
    if (moreText.hasClass("open_link")) {
      moreBtn.removeClass("open_position").addClass("close_position");
      moreText.removeClass("open_link").addClass("close_link");
      ambassadorLists.removeClass("close");

      //閉じる
    } else if (moreText.hasClass("close_link")) {
      moreBtn.removeClass("close_position").addClass("open_position");
      moreText.removeClass("close_link").addClass("open_link");
      ambassadorLists.addClass("close");

      //アンバサダー一覧の上部にスクロール
      $("html, body").animate({
        scrollTop: ambassadorTop,
      });
    }
  }

  //////////////////////////////////////////////////////////////////////
  //////////////   アンバサダータグ一覧への追加機能   //////////////
  //////////////////////////////////////////////////////////////////////
  let tagAreaArray = $(".ambassador__tag-area");
  Object.values(tagAreaArray).forEach(function (element) {
    //タグ属性の値を取得
    let tags = $(element).data("tags");

    //タグの入力があれば、カンマ区切りで配列にする
    if (tags) {
      tags = tags.split(",");
      //タグのHTMLを挿入
      insertTags(element, tags);
    }
  });

  function insertTags(element, tags) {
    tags.forEach(function (tag) {
      $(element).append(
        "<span class='ambassador__tag js-ambassador-tag'>" + tag + "</span>"
      );
    });
  }

  //////////////////////////////////////////////////////////////////////
  //////////////   アンバサダーのタグ絞り込み検索   //////////////
  //////////////////////////////////////////////////////////////////////
  //ハッシュ値からタグ名を取得し表示する
  let hash = location.hash.replace("#", "");
  searchAmbassador(hash);

  function searchAmbassador(tagname) {
    // 「空」「all(全て表示)」「top(スクロールTOP押下時)」なら全て表示
    if (!tagname || tagname === "all" || tagname === "top") {
      return false;
    } else {
      $(".js-ambassador-list").hide();
      Object.values(tagAreaArray).forEach(function (element) {
        //該当タグ属性の値を取得
        let tags = $(element).data("tags");

        //各アンバサダーのタグ名をカンマ区切りで配列にする
        if (tags) {
          tagsArray = tags.split(",");
        } else {
          //該当タグがなければ処理を終了
          return;
        }

        //各該当タグ配列の中にクリックタグのテキストが含まれていれば表示
        ambassadorShowHide(tagsArray, tagname, element);
        moreBtnShowHide();
      });
    }
  }

  //タグをクリックしたとき
  $(".js-ambassador-tag").on("click", function () {
    //クリックしたタグのテキストをハッシュにしてリロードする
    let clickTagName = $(this).text().trim().toLowerCase();
    location.hash = clickTagName;
    location.reload();
  });

  // 全て表示がクリックされたとき
  $("#resetTag").on("click", function () {
    // ハッシュをallしてリロードする
    location.hash = "all";
    location.reload();
  });

  //各該当タグ配列の中にクリックタグのテキストが含まれていれば表示
  function ambassadorShowHide(tagsArray, clickTagName, element) {
    if (
      tagsArray.map((tag) => tag.trim().toLowerCase()).includes(clickTagName)
    ) {
      $(element).parent().show();
    } else {
      $(element).parent().hide();
    }
  }

  //////////////////////////////////////////////////////////////////////
  //////////////   Moreボタン表示非表示切替   //////////////
  //////////////////////////////////////////////////////////////////////
  function moreBtnShowHide() {
    //display:noneではない.js-ambassador-listの数を取得
    ambassadorListLength = $(".js-ambassador-list").not(":hidden").length;

    if (ambassadorListLength <= 4) {
      //ambassadorListLengthが4以下ならMoreボタンを非表示
      $(".js-ambassador-more").hide();
      ambassadorLists.removeClass("close");
    } else {
      //ambassadorListLengthが5以上ならMoreボタンを表示
      $(".js-ambassador-more").show();
      ambassadorLists.addClass("close");
    }
  }
});