// 変数宣言
const pointPC = window.matchMedia("screen and (min-width: 960px)");
const locationCloudURL = document.getElementById("locationCloudURL").value;
const PrefecturesData = "/assets/files/address.json";
// 検索
// jsonデータを読み込み
async function getJson(path) {
  const response = await fetch(path);
  const json = await response.json();
  return json;
}


function areaSearch() {
  $(".js-areaSearch-prefectures").on("change", function (e) {
    const targetDom = $(this)
      .closest(".js-areaSearch")
      .find(".js-areaSearch-municipality");
    let prefecturesValue = $(this).val();
    let setHiddenAddressValue = $(this)
      .closest(".js-areaSearch")
      .find(".js-areaSearch-address");
      setHiddenAddressValue.val(prefecturesValue);

    getJson(PrefecturesData).then(function(result){
      const matchData = result.prefectures.filter(function(item, index){
        if (item.code == prefecturesValue) return true;
      });
      const municipalitiesData = matchData[0].municipalities;
      let html = '<option disabled selected>市区町村</option>';
      for (let i = 0; i < municipalitiesData.length; i++) {
        html += '<option value="' + municipalitiesData[i].code + '">' + municipalitiesData[i].name + '</option>';
      }
      targetDom.html(html);
    })

  });

  $(".js-areaSearch").on("submit", function (e) {
    e.preventDefault();
    const targetDom = $(this)
    .find(".js-areaSearch-municipality");
    let setHiddenAddressValue = $(this).find(".js-areaSearch-address");
    if(targetDom.val() != null){
      setHiddenAddressValue.val(targetDom.val());
    }
    let query = $(this).serialize();
    let PATH = "spot/list";
    $(this).attr("action", locationCloudURL + PATH);
    //  data-param="c_d19=1"
    if ($(this).is("[data-param]")) {
      query += "&" + $(this).data("param");
    }
    window.location.href = this.action + "?" + query;
  });
}

function freewordSearch() {
  $(".js-freewordSearch").on("submit", function (e) {
    e.preventDefault();
    let query = $(this).serialize();
    let addQuery = "&search-target=name.address_name.search_word.external_code.c_d6.c_d18.c_d85";
    let PATH = "freeword";
    if ($(this).is("[data-param]")) {
      addQuery += "&" + $(this).data("param");
    }
    $(this).attr("action", locationCloudURL + PATH);
    window.location.href = this.action + "?" + query + addQuery;
  });
}

function geolocationSearch() {
  $btn = $(".js-geolocationSearch");
  // 検索範囲
  const radius = 15000;
  // 検索上限数
  const limit = 10;
  const getPosition = function (options) {
    if (navigator.geolocation) {
      return new Promise((resolve, reject) =>
        navigator.geolocation.getCurrentPosition(resolve, reject)
      );
    } else {
      return new Promise((resolve) => resolve({}));
    }
  };
  function success(pos) {
    const lat = pos.coords.latitude;
    const lng = pos.coords.longitude;
    const PATH = "spot/list";
    const params = new URLSearchParams();
    params.append("coord", lat + "," + lng);
    params.append("radius", radius);
    params.append("limit", limit);
    const sendURL = locationCloudURL + PATH + "?" + params;
    return sendURL;
  }
  let buttonElem;
  $btn.on("click", function (e) {
    e.preventDefault();
    $(this).addClass("is-active");
    buttonElem = $(this).html();
    $(this)
      .empty()
      .html(
        '<div class="c-loading"><span class="c-loading__icon"></span></div>'
      );
    getPosition()
      .then((position) => {
        let URL = success(position);
        if (position.coords) {
          if ($(this).is("[data-param]")) {
            URL += "&" + $(this).data("param");
          }
          window.location.href = URL;
          $(this).html(buttonElem).removeClass("is-active");
        } else {
          alert("このブラウザでは位置情報機能がご利用できません。");
        }
      })
      .catch((err) => {
        $(this).html(buttonElem).removeClass("is-active");
        var msg = null;
        switch (err.code) {
          case err.PERMISSION_DENIED:
            msg = "端末の位置情報サービスをオンにしてください";
            break;
          case err.POSITION_UNAVAILABLE:
            msg = "位置情報の取得に失敗しました。";
            break;
          case err.TIMEOUT:
            msg = "タイムアウトしました";
            break;
        }
        alert(msg);
      });
  });
}


function stickyCalendar() {
  if ($(".js-stickyCalendar")) {
    let adjustHeight;
    let setTopPosition;
    let headerHeight;

    function setPosition() {
      if ($(".js-fixed").length) {
        adjustHeight = $(".js-fixed").height();
      }
      headerHeight = $(".js-stickyCalendar-header").height();
      $(".js-stickyCalendar-header").css({
        position: "sticky",
        "z-index": 100,
        top: adjustHeight,
      });
    }
    setPosition();

    $(window).resize(function () {
      setPosition();
    });

    $("a.js-stickyCalendar-scroll[href^='#']").click(function () {
      setTopPosition = adjustHeight + headerHeight;
      $("body,html")
        .stop()
        .animate(
          {
            scrollTop: $($(this).attr("href")).offset().top - setTopPosition,
          },
          "swing"
        );
      return false;
    });
  }
}

function accordion(elem) {
    // クリックされたelemの中の.accordion_headerに隣接する.accordion_innerが開いたり閉じたりする。
    if(elem.next(".js-accordion__content").not(':animated').length >= 1){
      elem.next(".js-accordion__content").stop().slideToggle();
      elem
      .find(".m-icon")
      .toggleClass("m-icon--toggle-plus-circle")
      .toggleClass("m-icon--toggle-minus-circle");
      elem.toggleClass("is-open");
      elem.closest(".js-accordion").toggleClass("is-open");
    }
};

function smoothScroll(){
  // イージング関数（easeOutExpo）
  function scrollToPos(position) {
    const startPos = window.scrollY;
    const distance = Math.min(position - startPos, document.documentElement.scrollHeight - window.innerHeight - startPos);
    const duration = 800; // スクロールにかかる時間（ミリ秒）

    let startTime;

    function easeOutExpo(t, b, c, d) {
      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
    }

    function animation(currentTime) {
      if (startTime === undefined) {
        startTime = currentTime;
      }
      const timeElapsed = currentTime - startTime;
      const scrollPos = easeOutExpo(timeElapsed, startPos, distance, duration);
      window.scrollTo(0, scrollPos);
      if (timeElapsed < duration) {
        requestAnimationFrame(animation);
      } else {
        window.scrollTo(0, position);
      }
    }
    requestAnimationFrame(animation);
  }

  // ページ内のスムーススクロール
  $("body").on("click", "a.js-scroll[href^='#']", function (e) {
    if (!$(this).data("box")) {
      const hash = $(this).attr("href");
      const target = $(hash);
      e.preventDefault();
      let adjustHeight = 10;
      // fixedメニューがある場合には高さを足す
      if ($(".js-fixed").length) {
        adjustHeight = adjustHeight + $(".js-fixed").height();
      }
      const position = target.offset().top - adjustHeight;
      scrollToPos(position);
    } else {
      const item = $(this).parents(".js-inScroll");
      const anchorHeight = item.find(".js-inScroll__anchor").height() + 5;
      const $target = $($(this).attr("href"));
      const dist = $target.position().top + anchorHeight;
      item.stop().animate(
        {
          scrollTop: $(this).scrollTop() + dist,
        },
        "swing"
      );
    }
  });

  // 別ページ遷移後のスムーススクロール
  const urlHash = window.location.hash;
  if (urlHash) {
    const target = $(urlHash);
    if (target) {
      let adjustHeight = 10;
      // fixedメニューがある場合には高さを足す
      if ($(".js-fixed").length) {
        adjustHeight = adjustHeight + $(".js-fixed").height();
      }
      $("html").css('scroll-padding-top',adjustHeight + "px");
    }
  }
}



// パラメータ取得
function getParam(name, url) {
  if (!url) url = window.location.href;
  name = name.replace(/[\[\]]/g, "\\$&");
  let regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
    results = regex.exec(url);
  if (!results) return null;
  if (!results[2]) return "";
  return decodeURIComponent(results[2].replace(/\+/g, " "));
}

function tab() {
  // ページ読み込み時のタブ切り替え
  let tabPram = $.map($(".js-tab"), function (el) {
    return $(el).data("tab");
  });
  let pram = getParam("active-tab");
  if (pram && $.inArray(pram, tabPram) !== -1) {
    $(".js-tab-panel,.js-tab").removeClass("is-active");
    $('[data-panel="' + pram + '"] , [data-tab="' + pram + '"]').addClass(
      "is-active"
    );
  }

  // ロード後のタブ切り替え
  $(".js-tab").on("click", function () {
    let dataPram = $(this).data("tab");
    $(".js-tab-panel,.js-tab").removeClass("is-active");
    $('[data-panel="' + dataPram + '"],[data-tab="' + dataPram + '"]').addClass(
      "is-active"
    );
  });
}

document.addEventListener("DOMContentLoaded", () => {
  "use strict";
  MicroModal.init({
    disableScroll: true,
    awaitOpenAnimation: true,
    awaitCloseAnimation: true,
  });

  $(".js-modal-video").modalVideo({ channel: "youtube" });

  if ($(".js-splide-top-mv").length) {
    new Splide(".js-splide-top-mv", {
      type: "loop", //ループスライダー   default: 'slide'
      speed: 1000, // スライダーの移動スピード(ms)   default: 400
      // autoplay: true, // 自動再生するか否か   defalut: false
      interval: 6000, // 自動再生の間隔(ms)   default: 5000
      padding: "20%",
      fixedWidth: "560px",
      focus: "center", //中央のスライドをアクティブにする
      updateOnMove: true, //is-activeクラスを移動前に更新するか否か
      gap: "50px", //スライドの隙間
      breakpoints: {
        //画面幅が750px以下の設定
        750: {
          padding: "20px",
          fixedWidth: "100%",
        },
      },
    }).mount();
  }


  $(".js-accordion__trigger").click(function (event) {
    accordion($(this));
    event.preventDefault();
  });
  smoothScroll();
  tab();
  stickyCalendar();
  freewordSearch();
  areaSearch();
  geolocationSearch();
});