(function ($, _, util, obj) {
    let container = document.querySelectorAll('#container>div');
    let price_container = document.querySelectorAll('.js-price-container>div');
    let event_li = document.querySelectorAll('#tab>li');
    let price_li = document.querySelectorAll('.js-price-tab>li');
    
    let currentEventIndex = 0;
    for (let i = 0; i < event_li.length; i++) {
        event_li[i].num = i;
        event_li[0].style.backgroundColor = '#0D2EA1';
        event_li[0].style.color = '#FFF';
        event_li[0].classList.add("font-style-1");
        event_li[0].classList.add("select-tab-border");

        event_li[i].onclick = function () {
            container[currentEventIndex].style.display = 'none';
            let index_other = this.num;
            container[index_other].style.display = 'block';
            currentEventIndex = index_other;

            for (let i = 0; i < event_li.length; i++) {
                event_li[i].style.backgroundColor = '';
                event_li[i].style.color = '';
                event_li[i].classList.remove("font-style-1");
                event_li[i].classList.remove("select-tab-border");
            }
            this.style.backgroundColor = '#0D2EA1';
            this.style.color = '#FFF';
            this.classList.add("font-style-1");
            this.classList.add("select-tab-border");
        }
    }

    let currentPriceIndex = 0;
    for (let i = 0; i < price_li.length; i++) {
        price_li[i].num = i;
        price_li[0].style.backgroundColor = '#0D2EA1';
        price_li[0].style.color = '#FFF';
        price_li[0].classList.add("select-tab-border");

        price_li[i].onclick = function () {
            price_container[currentPriceIndex].style.display = 'none';
            let index_other = this.num;
            price_container[index_other].style.display = 'block';
            currentPriceIndex = index_other;

            for (let i = 0; i < price_li.length; i++) {
                price_li[i].style.backgroundColor = '';
                price_li[i].style.color = '';
                price_li[i].classList.remove("select-tab-border");
            }
            this.style.backgroundColor = '#0D2EA1';
            this.style.color = '#FFF';
            this.classList.add("select-tab-border");

            // price_containerが変更された後の初期化処理
            resetCategoriesAndProcess();
        }
    }

    ////////// MODAL START
    // (省略されたモーダル関連のコード)
    ////////// MODAL END

})(BROTHER.lib.$, BROTHER.lib._, BROTHER.util, BROTHER.obj);

let categories;
let nums;
let category_data = "";
let num_data = "";
let attention_data = "";

function format_with_regex(number) {
    return !(number + '').includes('.')
        ? (number + '').replace(/\d{1,3}(?=(\d{3})+$)/g, (match) => {
            return match + ',';
        })
        : (number + '').replace(/\d{1,3}(?=(\d{3})+(\.))/g, (match) => {
            return match + ',';
        });
}

function showResult(obj, isShow) {
    isShow
        ? (obj.classList.remove('tag_hide'), obj.classList.add('tag_display'))
        : (obj.classList.remove('tag_display'), obj.classList.add('tag_hide'));
}

async function setSelectOption(select_num, selected_key, select_obj) {
    let filename = "";
    let data = "";
    let isfetch = false;
    switch (select_num) {
        case 1:
            category_data === ""
                ? (isfetch = true, filename = "ProductType.json")
                : data = category_data;
            break;
        case 2:
            num_data === ""
                ? (isfetch = true, filename = "ProductCode.json")
                : data = num_data;
            break;
    }
    if (isfetch) {
        let current_domain = location.hostname;
        let protocol = location.protocol;
        let port = location.port && location.port != '80' ? ':' + location.port : '';
        try {
            let response = await fetch(protocol + "//" + current_domain + port + "/-/media/cojp/product/support_info/json/s-pack/" + filename);
            data = await response.json();
            if (select_num === 1) {
                category_data = data;
            } else {
                num_data = data;
            }
        } catch (error) {
            return;
        }
    }
    addOption(select_num, selected_key, select_obj, data);
}

function addOption(select_num, selected_key, select_obj, data) {
    let option_groups = data.option_groups;
    let option_group = select_num === 1 ? option_groups : option_groups.filter(value => value.option_parent === selected_key);
    
    if (option_group.length > 0) {
        let options = option_group[0].options;
        options.forEach(option => {
            select_obj.add(new Option(option.value, option.key));
        });
    }
}

async function updateCategorySelect(category) {
    let current_domain = location.hostname;
    let protocol = location.protocol;
    let port = location.port && location.port != '80' ? ':' + location.port : '';
    try {
        let response = await fetch(protocol + "//" + current_domain + port + "/-/media/cojp/product/support_info/json/s-pack/ProductType.json");
        let data = await response.json();
        let option_groups = data.option_groups;

        // 以前のオプションをクリア
        category.options.length = 0;
        category.add(new Option("--", "", true));

        // クラス名に基づいて新しいオプションを追加
        let category_class = category.className;
        let relevant_groups = option_groups.filter(group => category_class.includes(group.option_type));
        
        relevant_groups.forEach(group => {
            group.options.forEach(option => {
                category.add(new Option(option.value, option.key));
            });
        });
    } catch (error) {
        return;
    }
}

function initSelectObj(n) {
    if (n === 0) {
        categories.forEach(category => updateCategorySelect(category));
    }
    if (n === 0 || n === 1) {
        nums.forEach(num => {
            num.options.length = 0;
            num.add(new Option("項目1回答後、ご選択ください", "", true));
        });
    }
}

async function updateTable(selected_key) {
    let current_domain = location.hostname;
    let protocol = location.protocol;
    let port = location.port && location.port !== '80' ? ':' + location.port : '';
    try {
        let response = await fetch(protocol + "//" + current_domain + port + "/-/media/cojp/product/support_info/json/s-pack/ProductPrice.json");
        let data = await response.json();
        let option_groups = data.option_groups;
        let option_group = option_groups.find(group => group.option_parent === selected_key);

        if (option_group) {
            option_group.options.forEach(option => {
                let idsToCheck = [option.key, option.key + '-sp'];
                idsToCheck.forEach(id => {
                    let element = document.getElementById(id);
                    if (element) {
                        element.innerText = option.value;
                    }
                });
            });
        }
        document.querySelectorAll("tr").forEach(row => {
            let allEmpty = Array.from(row.querySelectorAll("td")).every(td => td.innerText === "");
            row.classList.toggle("price-table-hidden", allEmpty);
        });
    } catch (error) {
        return;
    }
}

function resetCategoriesAndProcess() {
    // 現在表示されている価格コンテナ内のカテゴリを取得して初期化
    categories = document.querySelectorAll(".price-type-select");
    nums = document.querySelectorAll(".price-name-select");

    // カテゴリ選択やテーブル表示の初期化を行う
    initSelectObj(0);

    // すべての表示されているテーブルから "show-table" クラスを削除して非表示にする
    document.querySelectorAll('[class*="price-table-before"], [class*="price-table"]').forEach(el => {
        el.classList.remove("show-table");
    });
}

document.addEventListener("DOMContentLoaded", () => {
    resetCategoriesAndProcess(); // 初期状態でカテゴリと処理をセット

    categories.forEach(category => {
        category.addEventListener("change", (e) => {
            initSelectObj(1);
            let index = e.target.selectedIndex;
            let key = e.target.options[index].value;
            nums.forEach(num => setSelectOption(2, key, num));
        });
    });

    nums.forEach(num => {
        num.addEventListener("change", (e) => {
            let index = e.target.selectedIndex;
            let key = e.target.options[index].value;
            updateTable(key);
        });
    });

});

document.addEventListener("DOMContentLoaded", () => {
    let priceStartSelects = document.querySelectorAll(".price-name-select1, .price-name-select2, .price-name-select3, .price-name-select4, .price-name-select5, .price-name-select6");
    let priceTypeSelects = document.querySelectorAll(".price-type-select1, .price-type-select2, .price-type-select3, .price-type-select4, .price-type-select5, .price-type-select6");

    function updateTableVisibility() {
        for (let i = 1; i <= 6; i++) {
            let priceTypeSelect = document.querySelector(`.price-type-select${i}`);
            let priceNameSelect = document.querySelector(`.price-name-select${i}`);

            if (priceTypeSelect.value === "" || priceNameSelect.value === "") {
                document.querySelectorAll(`.price-table-before${i}, .price-table${i}`).forEach(el => {
                    el.classList.remove("show-table");
                });
            } else {
                document.querySelectorAll(`.price-table-before${i}, .price-table${i}`).forEach(el => {
                    el.classList.add("show-table");
                });
            }
        }
    }

    priceStartSelects.forEach((select) => {
        select.addEventListener("change", () => {
            updateTableVisibility();
        });
    });

    priceTypeSelects.forEach((select) => {
        select.addEventListener("change", () => {
            updateTableVisibility();
        });
    });
});