jQuery(document).ready(function ($) {

    if (typeof acf !== 'undefined') {
        const currentPostId = acf.get('post_id');

        // console.log('ACF is defined', acf);
        // console.log('Post ID', currentPostId);

        const select_multiple = [
            'job_application_practice_areas',
            'lawjob_job_alert_practice_areas',
            'lawjob_job_alert_vacancy_type',
            'lawjob_job_alert_job_types'
        ];

        $.each(select_multiple, function (_, field_slug) {
            //const $container = $('#' + field_slug + '.select2-optgroups');
            const $container = $('div[data-name="' + field_slug + '"]');
            const $selectElement = $container.find('select');
            var nextField = false;
            // console.log(field_slug);
            // console.log($container);
            // console.log($selectElement);
            // console.log($('div[name="' + field_slug + '"].select2-optgroups'));
            // console.log('div[name="' + field_slug + '"].select2-optgroups select');

            if (typeof $selectElement.length !== 'undefined' && $selectElement.length > 0) {
                get_ACF_Values($selectElement, field_slug, currentPostId);
            }
        });
    }

    function get_ACF_Values($selectElement, field_slug, currentPostId) {
        $.ajax({
            type: 'post',
            url: myAjaxSelect2.ajaxurl,
            data: {
                action: 'lawjob_get_acf_value',
                field_slug: field_slug,
                curr_post_id: currentPostId
            },
            success: function (result) {
                var saved_options = result.options;

                console.log('Result getACFValues : ', field_slug, saved_options);     
                    
                get_select_options($selectElement, saved_options, field_slug);

            },
        });
    }

    function get_select_options($selectElement, saved_options, field_slug) {
        console.log("------------");
        console.log("1 - get_select_options : ");
        console.log($selectElement);
        console.log(saved_options);
        console.log("------------");

        $.ajax({
            type: 'post',
            url: myAjaxSelect2.ajaxurl,
            data: {
                action: 'lawjob_get_select_options',
                field_slug: field_slug
            },
            success: function (result) {
                console.log('Result for get_select_options : ', result, field_slug);

                update_select2_Options($selectElement, result, saved_options);
                get_saved_options($selectElement, saved_options);
            },
        });
    }

    function update_select2_Options($select, result, saved_options) {
        console.log("------------");
        console.log("2 - updateSelect2Options : ");
        console.log($select);
        console.log(result);
        console.log(saved_options);
        console.log("------------");

        $select.select2({ closeOnSelect: false });
        console.log("------------");
        console.log('Options : ', result);
        console.log("------------");

        $.each(result, function (_, option) {
            if (option.children && option.children.length > 0) {
                const $optgroup = $('<optgroup>').attr('label', option.text);
                update_select2_Options($optgroup, option.children);
                $select.append($optgroup).trigger('change');
            } else {
                // console.log('saved_options : ', saved_options);
                $select.append(new Option(option.text, option.id, false, false)).trigger('change');
            }
        });

    }

    function get_saved_options($selectElement, saved_options) {
        const isCreatedJob = (saved_options === null || typeof saved_options === "undefined");
        console.log("------------");
        console.log("3 - getSavedOptions : ");
        console.log(isCreatedJob);
        console.log($selectElement);
        console.log(saved_options);
        console.log("------------");

        if (isCreatedJob) {
            $selectElement.val('Any');
            $selectElement.trigger('change');
        } else {
            $selectElement.val(saved_options);
            $selectElement.trigger('change');
        }
    }

});