/**
 * The purpose of this script is to enhance all Autocomplete (select2) widgets with a [+] button functionality. It only
 * relies on Javascript and does not imply any changes on your CRUD controllers. The business logic is:
 *
 *     1. It finds all Select2 widgets. It also listens for events when a new Collection row is added
 *     2. If those have an "autocomplete" URL that is derived from the AssociationField::OPTION_CRUD_CONTROLLER setting
 *     3. Use the "new" action from the same controller to fetch the record creation form. Show that in a popup
 *     4. Upon submission the script waits for a redirect to edit that record (saveAndContinue action)
 *     5. It extracts the Entity Id from the above URL and uses it to search the record through the CRUD Controller
 *          - This is done to get the __toString() representation of the Entity, which may be composed of a few fields
 *     6. Adds the ID and Text representation to the Autocomplete and selects it
 *
 * Known issues:
 *     - It's not fully compliant with error handling, etc. i.e. the form might get stuck in case of submit errors
 *     - The forms shown in the popup should be simple - CollectionFields and Autocompletes do not work properly (JS?)
 *     - There is no backend validation Out of the box - only the html5 one
 *
 * @author Ilian Madzharov <imadzharov88@gmail.com>
 */

 window.addEventListener('load', function() {
    enhanceAutocompleteInputs();
    document.addEventListener('ea.collection.item-added', enhanceAutocompleteInputs);//for CollectionField Autocompletes

    $('#Menu_haveSize').change(function() {
        changeSize();
    });

    $('#Menu_haveExtra').change(function() {
        changeExtra();
    });

    changeSize();
    changeExtra();

    $('.idEntity').hide();

    url_extra = window.location.origin + '/admin?crudAction=index&crudControllerFqcn=App%5CController%5CAdmin%5CExtraTypeCrudController&menuIndex=10&submenuIndex=-1&filters%5Bid%5D='+document.getElementById('Menu_id').value;
    url_extra_add = window.location.origin + '/admin?crudAction=new&crudControllerFqcn=App%5CController%5CAdmin%5CExtraTypeCrudController&menuIndex=10&submenuIndex=-1&idMenuSelected='+document.getElementById('Menu_id').value;
    text = "<p><i class='fa fa-pencil'></i> <a target='_blank' href='"+url_extra+"'>Clique para ver ou editar Extras</a><p/>";
    text = text + "<p><i class='fas fa-plus'></i> <a target='_blank' href='"+url_extra_add+"'>Clique para adicionar Tipo de Extras</a></p>";
    $(".extraField").html(text);
});

function changeSize()
{
    if ($('#Menu_haveSize').is(":checked")) {
        $('.panelSize').show(100);
        $('.panelPvp').hide(100);
    } else {
        $('.panelSize').hide(100);
        $('.panelPvp').show(100);
    }
}

function changeExtra()
{
    if ($('#Menu_haveExtra').is(":checked")) {
        $('.panelExtra').show(100);
    } else {
        $('.panelExtra').hide(100);
    }
}


const loader = $('<div class="spinner-border m-5" role="status"><span class="sr-only">Loading...</span></div>');



function enhanceAutocompleteInputs(ev) {
/*
    AUTOCMPLETE
    http://localhost:9019/admin?autocompleteContext%5BcrudControllerFqcn%5D=App%5CController%5CAdmin%5CMenuCrudController&autocompleteContext%5BpropertyName%5D=size&autocompleteContext%5BoriginatingPage%5D=edit&crudAction=autocomplete&crudControllerFqcn=App%5CEntity%5CSize&page=1

    --CORECTA
    http://localhost:9019/admin?crudAction=new&crudControllerFqcn=App%5CController%5CAdmin%5CSizeCrudController&menuIndex=9&referrer=http://localhost:9019/admin?crudAction%3Dindex%26crudControllerFqcn%3DApp%255CController%255CAdmin%255CSizeCrudController%26menuIndex%3D9%26submenuIndex%3D-1&submenuIndex=-1
*/

    $('.tomselected').each(function () {
        let $this = $(this),
            autocompleteUrl = $this.data('ea-autocomplete-endpoint-url'),
            entidad = $(this)[0]['id'];

        if (undefined !== autocompleteUrl && undefined === $this.attr('data-enhanced')) {
            $this.attr('data-enhanced', true);//Prevent adding [+] more than once (e.g. when using CollectionField)

            //Add [+] Btn & apply some styles
            const plusBtn = $('<button type="button" class="btn btn-link"><i class="fas fa-plus"></i></button>');

            if (entidad === 'Menu_size_autocomplete') {
                var urlEdit = 'admin?crudAction=index&crudControllerFqcn=App%5CController%5CAdmin%5CSizeCrudController&menuIndex=9&submenuIndex=-1';
                urlEdit = urlEdit + '&filters%5Bid%5D='+document.getElementById('Menu_id').value;
            } else if(entidad === 'Menu_extra_autocomplete') {
                var urlEdit = 'rer';
            }
            var EditBtn = $('<a href="'+urlEdit+'" target="_blank"><i class="fa fa-pencil"></i></a>');

            $this.parent().append(plusBtn);
            $this.parent().append(EditBtn);
            $this.parent().find('.select2-container--bootstrap').css('display', 'inline-block');

            //get Capitalized entity (used to identify the form later); Collection rows ids are handled as well
            let association = getAssociationName($this.attr('id'));
            plusBtn.click(function() {
                showPopupLoader();

                //Fetch the form for the "new" action from the same CRUD controller

                if (entidad === 'Menu_size_autocomplete') {
                    autocompleteUrl = window.location.origin +'/admin?crudAction=new&crudControllerFqcn=App%5CController%5CAdmin%5CSizeCrudController&menuIndex=9&submenuIndex=-1';
                } else if(entidad === 'Menu_extra_autocomplete') {
                    autocompleteUrl = window.location.origin + '/admin?crudAction=new&crudControllerFqcn=App%5CController%5CAdmin%5CExtraCrudController&menuIndex=9&submenuIndex=-1';
                }
                idRestaurant = (document.getElementById('Menu_id').value);
                autocompleteUrl = autocompleteUrl + '&idMenu=' + idRestaurant;

                let crudNewUrl = autocompleteUrl.replace('crudAction=autocomplete', 'crudAction=new');
                $.get(crudNewUrl, function(data) {
                    //Save BTN is not part of the form, find it & add it. The name is essential!
                    const saveBtn = $(data).find('.action-saveAndReturn.btn.btn-primary.action-save').val('saveAndContinue'),
                        hiddenInput = $('<input/>', {type: 'hidden', name: saveBtn.attr('name'), value: saveBtn.val()}),
                        title = $(data).find('div.content-header-title h1.title').text();

                    jsFile = '';

                    let form = $(data).find('form#new-' + association + '-form')
                        .prepend('<h5>' + title + '</h5>')
                        .css('min-width', '450px')
                        .append(saveBtn)
                        .append(hiddenInput)
                        .append("<script>searchParams = new URLSearchParams(window.location.search);</script>")
                        .append("<script>valueMenu = searchParams.get('entityId')</script>")
                        .append("<script>$('#Size_menu option[value='+valueMenu+']').attr('selected','selected');</script>")
                        .submit(function(ev) {
                            ev.preventDefault();
                            showPopupLoader();

                            //TODO -> check if file upload fields work properly
                            const data = new URLSearchParams();
                            for (const pair of new FormData(this)) {
                                data.append(pair[0], pair[1]);
                            }

                            //Use Fetch API, since JQuery doesn't catch redirects. Refactor to use Fetch everywhere?
                            fetch(crudNewUrl, {
                                method: 'post',
                                body: data,
                            })
                            .then(response => {
                                /*
                                * TODO
                                *  Backend validation is not done Out of the Box -> in case there are duplicate records
                                *  or other errors, this logic will not work out.
                                * */
                                if (response.redirected) {
                                    const urlParams = new URLSearchParams(response.url);
                                    const entityId = urlParams.get('entityId');

                                    const newOption = new Option('nueva opcion', entityId, true, true);
                                    $this.append(newOption).trigger('change');

                                    $.featherlight.close();

                                    $("button[value*='saveAndContinue']").trigger('click');

                                    //Fetch the entity by ID, add it to the Autocomplete, select it & close the popup
                                    /*
                                    $.get(autocompleteUrl + "&query=" + entityId, function( data ) {
                                        const newEntry = data.results.filter(res => res.entityId == entityId).pop();

                                        const newOption = new Option(newEntry.entityAsString, newEntry.entityId, true, true);
                                        $this.append(newOption).trigger('change');

                                        $.featherlight.close();
                                    });
                                    */
                                }
                            });
                        });

                    setPopupContent(form);
                });
            });
        }
    });
}

function getAssociationName(identifier) {
    let segment = 1,//normal autocomplete ID: <main entity>_<Association_peroperty>_autocomplete
        array = identifier.split('_');

    if (4 == array.length && !isNaN(array[2])) {
        //<main entity>_<collection properties>_<ID of the collection row>_<Association_peroperty>
        segment = 3;
    }

    return array[segment].charAt(0).toUpperCase() + array[segment].slice(1);//get capitalized Entity
}

function showPopupLoader() {
    $.featherlight.close();

    $.featherlight(loader, {
        closeOnClick: false,
        closeOnEsc: false,
        closeIcon: ''
    });
    $('.featherlight-content').addClass('overflow-hidden');
}

function setPopupContent(content) {
    $.featherlight.close();

    $.featherlight(content, {
        closeOnClick: 'background',
        closeOnEsc: true,
        closeIcon: '&#10005;'
    });
}