// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.

/**
 * AJAX helper for the inline editing a value.
 *
 * This script is automatically included from template core/inplace_editable
 * It registers a click-listener on [data-inplaceeditablelink] link (the "inplace edit" icon),
 * then replaces the displayed value with an input field. On "Enter" it sends a request
 * to web service core_update_inplace_editable, which invokes the specified callback.
 * Any exception thrown by the web service (or callback) is displayed as an error popup.
 *
 * @module     core/inplace_editable
 * @copyright  2016 Marina Glancy
 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 * @since      3.1
 */
define(
    ['jquery',
        'core/ajax',
        'core/templates',
        'core/notification',
        'core/str',
        'core/config',
        'core/url',
        'core/form-autocomplete',
        'core/loadingicon',
        'core/pending',
        'core/local/inplace_editable/events',
    ],
    function($, ajax, templates, notification, str, cfg, url, autocomplete, LoadingIcon, Pending, Events) {

        const removeSpinner = function(element) {
            element.find('.loading-icon').hide();
        };

        /**
         * Update an inplace editable value.
         *
         * @param {Jquery} mainelement the element to update
         * @param {string} value the new value
         * @param {bool} silent if true the change won't alter the current page focus
         * @fires event:core/inplace_editable:updated
         * @fires event:core/inplace_editable:updateFailed
         */
        const updateValue = function(mainelement, value, silent) {
            var pendingId = [
                mainelement.attr('data-itemid'),
                mainelement.attr('data-component'),
                mainelement.attr('data-itemtype'),
            ].join('-');

            var pendingPromise = new Pending(pendingId);
            LoadingIcon.addIconToContainerRemoveOnCompletion(mainelement, pendingPromise);

            ajax.call([{
                methodname: 'core_update_inplace_editable',
                args: {
                    itemid: mainelement.attr('data-itemid'),
                    component: mainelement.attr('data-component'),
                    itemtype: mainelement.attr('data-itemtype'),
                    value: value,
                },
            }])[0]
                .then(function(data) {
                    return templates.render('core/inplace_editable', data)
                        .then(function(html, js) {
                            var oldvalue = mainelement.attr('data-value');
                            var newelement = $(html);
                            templates.replaceNode(mainelement, newelement, js);
                            if (!silent) {
                                newelement.find('[data-inplaceeditablelink]').focus();
                            }

                            // Trigger updated event on the DOM element.
                            Events.notifyElementUpdated(newelement.get(0), data, oldvalue);

                            return;
                        });
                })
                .then(function() {
                    return pendingPromise.resolve();
                })
                .fail(function(ex) {
                    removeSpinner(mainelement);
                    M.util.js_complete(pendingId);

                    // Trigger update failed event on the DOM element.
                    let updateFailedEvent = Events.notifyElementUpdateFailed(mainelement.get(0), ex, value);
                    if (!updateFailedEvent.defaultPrevented) {
                        notification.exception(ex);
                    }
                });
        };

        $('body').on('click keypress', '[data-inplaceeditable] [data-inplaceeditablelink]', function(e) {
            if (e.type === 'keypress' && e.keyCode !== 13) {
                return;
            }
            var editingEnabledPromise = new Pending('autocomplete-start-editing');
            e.stopImmediatePropagation();
            e.preventDefault();
            var target = $(this),
                mainelement = target.closest('[data-inplaceeditable]');

            var turnEditingOff = function(el) {
                el.find('input').off();
                el.find('select').off();
                el.html(el.attr('data-oldcontent'));
                el.removeAttr('data-oldcontent');
                el.removeClass('inplaceeditingon');
                el.find('[data-inplaceeditablelink]').focus();

                // Re-enable any parent draggable attribute.
                el.parents(`[data-inplace-in-draggable="true"]`)
                    .attr('draggable', true)
                    .attr('data-inplace-in-draggable', false);
            };

            var turnEditingOffEverywhere = function() {
                // Re-enable any disabled draggable attribute.
                $(`[data-inplace-in-draggable="true"]`)
                    .attr('draggable', true)
                    .attr('data-inplace-in-draggable', false);

                $('span.inplaceeditable.inplaceeditingon').each(function() {
                    turnEditingOff($(this));
                });
            };

            var uniqueId = function(prefix, idlength) {
                var uniqid = prefix,
                    i;
                for (i = 0; i < idlength; i++) {
                    uniqid += String(Math.floor(Math.random() * 10));
                }
                // Make sure this ID is not already taken by an existing element.
                if ($("#" + uniqid).length === 0) {
                    return uniqid;
                }
                return uniqueId(prefix, idlength);
            };

            var turnEditingOnText = function(el) {
                str.get_string('edittitleinstructions').done(function(s) {
                    var instr = $('<span class="editinstructions">' + s + '</span>').
                        attr('id', uniqueId('id_editinstructions_', 20)),
                        inputelement = $('<input type="text"/>').
                            attr('id', uniqueId('id_inplacevalue_', 20)).
                            attr('value', el.attr('data-value')).
                            attr('aria-describedby', instr.attr('id')).
                            addClass('ignoredirty').
                            addClass('form-control'),
                        lbl = $('<label class="accesshide">' + mainelement.attr('data-editlabel') + '</label>').
                            attr('for', inputelement.attr('id'));
                    el.html('').append(instr).append(lbl).append(inputelement);

                    inputelement.focus();
                    inputelement.select();
                    inputelement.on('keyup keypress focusout', function(e) {
                        if (cfg.behatsiterunning && e.type === 'focusout') {
                            // Behat triggers focusout too often.
                            return;
                        }
                        if (e.type === 'keypress' && e.keyCode === 13) {
                            // We need 'keypress' event for Enter because keyup/keydown would catch Enter that was
                            // pressed in other fields.
                            var val = inputelement.val();
                            turnEditingOff(el);
                            updateValue(el, val);
                        }
                        if ((e.type === 'keyup' && e.keyCode === 27) || e.type === 'focusout') {
                            // We need 'keyup' event for Escape because keypress does not work with Escape.
                            turnEditingOff(el);
                        }
                    });
                });
            };

            var turnEditingOnToggle = function(el, newvalue) {
                turnEditingOff(el);
                updateValue(el, newvalue);
            };

            var turnEditingOnSelect = function(el, options) {
                var i,
                    inputelement = $('<select></select>').
                        attr('id', uniqueId('id_inplacevalue_', 20)).
                        addClass('custom-select'),
                    lbl = $('<label class="accesshide">' + mainelement.attr('data-editlabel') + '</label>')
                        .attr('for', inputelement.attr('id'));
                for (i in options) {
                    inputelement
                        .append($('<option>')
                            .attr('value', options[i].key)
                            .html(options[i].value));
                }
                inputelement.val(el.attr('data-value'));

                el.html('')
                    .append(lbl)
                    .append(inputelement);

                inputelement.focus();
                inputelement.select();
                inputelement.on('keyup change focusout', function(e) {
                    if (cfg.behatsiterunning && e.type === 'focusout') {
                        // Behat triggers focusout too often.
                        return;
                    }
                    if (e.type === 'change') {
                        var val = inputelement.val();
                        turnEditingOff(el);
                        updateValue(el, val);
                    }
                    if ((e.type === 'keyup' && e.keyCode === 27) || e.type === 'focusout') {
                        // We need 'keyup' event for Escape because keypress does not work with Escape.
                        turnEditingOff(el);
                    }
                });
            };

            var turnEditingOnAutocomplete = function(el, args) {
                var i,
                    inputelement = $('<select></select>').
                        attr('id', uniqueId('id_inplacevalue_', 20)).
                        addClass('form-autocomplete-original-select').
                        addClass('custom-select'),
                    lbl = $('<label class="accesshide">' + mainelement.attr('data-editlabel') + '</label>')
                        .attr('for', inputelement.attr('id')),
                    options = args.options,
                    attributes = args.attributes,
                    saveelement = $('<a href="#"></a>'),
                    cancelelement = $('<a href="#"></a>');

                for (i in options) {
                    inputelement
                        .append($('<option>')
                            .attr('value', options[i].key)
                            .html(options[i].value));
                }
                if (attributes.multiple) {
                    inputelement.attr('multiple', 'true');
                }
                inputelement.val(JSON.parse(el.attr('data-value')));

                str.get_string('savechanges', 'core').then(function(s) {
                    return templates.renderPix('e/save', 'core', s);
                }).then(function(html) {
                    saveelement.append(html);
                    return;
                }).fail(notification.exception);

                str.get_string('cancel', 'core').then(function(s) {
                    return templates.renderPix('e/cancel', 'core', s);
                }).then(function(html) {
                    cancelelement.append(html);
                    return;
                }).fail(notification.exception);

                el.html('')
                    .append(lbl)
                    .append(inputelement)
                    .append(saveelement)
                    .append(cancelelement);

                inputelement.focus();
                inputelement.select();
                autocomplete.enhance(inputelement,
                    attributes.tags,
                    attributes.ajax,
                    attributes.placeholder,
                    attributes.caseSensitive,
                    attributes.showSuggestions,
                    attributes.noSelectionString)
                    .then(function() {
                        // Focus on the enhanced combobox.
                        el.find('[role=combobox]').focus();
                        // Stop eslint nagging.
                        return;
                    }).fail(notification.exception);

                inputelement.on('keyup', function(e) {
                    if ((e.type === 'keyup' && e.keyCode === 27) || e.type === 'focusout') {
                        // We need 'keyup' event for Escape because keypress does not work with Escape.
                        turnEditingOff(el);
                    }
                });
                saveelement.on('click', function(e) {
                    var val = JSON.stringify(inputelement.val());
                    // We need to empty the node to destroy all event handlers etc.
                    inputelement.empty();
                    turnEditingOff(el);
                    updateValue(el, val);
                    e.preventDefault();
                });
                cancelelement.on('click', function(e) {
                    // We need to empty the node to destroy all event handlers etc.
                    inputelement.empty();
                    turnEditingOff(el);
                    e.preventDefault();
                });
            };

            var turnEditingOn = function(el) {
                el.addClass('inplaceeditingon');
                el.attr('data-oldcontent', el.html());

                var type = el.attr('data-type');
                var options = el.attr('data-options');

                // Input text inside draggable elements disable text selection in some browsers.
                // To prevent this we temporally disable any parent draggables.
                el.parents('[draggable="true"]')
                    .attr('data-inplace-in-draggable', true)
                    .attr('draggable', false);

                if (type === 'toggle') {
                    turnEditingOnToggle(el, options);
                } else if (type === 'select') {
                    turnEditingOnSelect(el, $.parseJSON(options));
                } else if (type === 'autocomplete') {
                    turnEditingOnAutocomplete(el, $.parseJSON(options));
                } else {
                    turnEditingOnText(el);
                }
            };

            // Turn editing on for the current element and register handler for Enter/Esc keys.
            turnEditingOffEverywhere();
            turnEditingOn(mainelement);
            editingEnabledPromise.resolve();

        });


        return {
            /**
             * Return an object to interact with the current inplace editables at a frontend level.
             *
             * @param {Element} parent the parent element containing a inplace editable
             * @returns {Object|undefined} an object to interact with the inplace element, or undefined
             *                             if no inplace editable is found.
             */
            getInplaceEditable: function(parent) {
                const element = parent.querySelector(`[data-inplaceeditable]`);
                if (!element) {
                    return undefined;
                }
                // Return an object to interact with the inplace editable.
                return {
                    element,
                    /**
                     * Get the value from the inplace editable.
                     *
                     * @returns {string} the current inplace value
                     */
                    getValue: function() {
                        return this.element.dataset.value;
                    },
                    /**
                     * Force a value change.
                     *
                     * @param {string} newvalue the new value
                     * @fires event:core/inplace_editable:updated
                     * @fires event:core/inplace_editable:updateFailed
                     */
                    setValue: function(newvalue) {
                        updateValue($(this.element), newvalue, true);
                    },
                    /**
                     * Return the inplace editable itemid.
                     *
                     * @returns {string} the current itemid
                     */
                    getItemId: function() {
                        return this.element.dataset.itemid;
                    },
                };
            }
        };
    });