(function () {
    function getSubcategoriesUrl() {
        return window.location.pathname.replace(/\/(?:add|\d+\/change)\/?$/, '/subcategories/');
    }

    function setOptions(select, subcategories, selectedId) {
        var emptyOption = Array.prototype.find.call(select.options, function (option) {
            return option.value === '';
        });
        var emptyLabel = emptyOption ? emptyOption.textContent : '---------';

        select.innerHTML = '';
        select.appendChild(new Option(emptyLabel, ''));

        subcategories.forEach(function (subcategory) {
            var option = new Option(subcategory.name, subcategory.id);

            if (String(subcategory.id) === String(selectedId)) {
                option.selected = true;
            }

            select.appendChild(option);
        });
    }

    function loadSubcategories(categorySelect, subcategorySelect, selectedId) {
        if (!categorySelect.value) {
            setOptions(subcategorySelect, [], '');
            return;
        }

        var url = getSubcategoriesUrl() + '?category_id=' + encodeURIComponent(categorySelect.value);

        fetch(url, {
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
            .then(function (response) {
                if (!response.ok) {
                    throw new Error('Failed to load subcategories.');
                }

                return response.json();
            })
            .then(function (data) {
                setOptions(subcategorySelect, data.subcategories || [], selectedId);
            });
    }

    document.addEventListener('DOMContentLoaded', function () {
        var categorySelect = document.getElementById('id_category');
        var subcategorySelect = document.getElementById('id_subcategory');

        if (!categorySelect || !subcategorySelect) {
            return;
        }

        categorySelect.addEventListener('change', function () {
            loadSubcategories(categorySelect, subcategorySelect, '');
        });

        if (!categorySelect.value) {
            setOptions(subcategorySelect, [], '');
        }
    });
}());