const openModal = (id) => {
    const el = document.getElementById(id);
    document.querySelector("body").style.setProperty("overflow-y", "hidden");
    el.classList.add("open");
};

const closeModal = (id) => {
    const el = document.getElementById(id);
    document.querySelector("body").style.setProperty("overflow-y", "auto");
    el.classList.remove("open");

    // モーダルを閉じたら、開いていた画面を全て閉じる
    hidePrefectures();
};

const showPrefectures = (regCd) => {
    const regions = document.getElementById(`regions`);
    const prefectures = document.getElementById(`reg-cd-${regCd}`);
    const backButton = document.getElementById(`back-button`);
    regions.classList.remove("show");
    prefectures.classList.add("show");
    backButton.classList.add("show");
};

const hidePrefectures = () => {
    const regions = document.getElementById(`regions`);
    const prefectures = document.querySelectorAll(`.search-modal__prefectures`);
    const backButton = document.getElementById(`back-button`);
    regions.classList.add("show");
    prefectures.forEach((prefecture) => prefecture.classList.remove("show"));
    backButton.classList.remove("show");

    // 地域選択に戻ったら、開いていた都道府県を全て閉じる
    const cities = document.querySelectorAll(`.search-modal__cities`);
    const toggleButtons = document.querySelectorAll(
        `.search-modal__prefecture-name--toggle-button`
    );
    cities.forEach((city) => city.classList.remove("show"));
    toggleButtons.forEach((button) => (button.value = "+"));
};

const showPrefCities = (prefCd) => {
    const cities = document.getElementById(`pref-cities-${prefCd}`);
    cities.classList.remove("show");
};

const hidePrefCities = (prefCd) => {
    const cities = document.getElementById(`pref-cities-${prefCd}`);
    cities.classList.add("show");
};

const togglePrefectureCities = (prefCd) => {
    const toggleButton = document.getElementById(
        `pref-cities-toggle-button-${prefCd}`
    );
    const cities = document.getElementById(`pref-cities-${prefCd}`);

    if (cities.classList.contains("show")) {
        toggleButton.value = "+";
        cities.classList.remove("show");
        return;
    }
    toggleButton.value = "—";
    cities.classList.add("show");
};