/*globals window, define*/
/*jslint nomen:true, unparam: true*/

/**
 * Add a button to a input field that removes/resets the inserted value.
 *
 * The `de_epages.presentationUiInputaction()` adds a button to the DOM when the default value of the input changes. Clicking this button removes/resets the input field.
 *
 * ### Examples
 * Attach a presentationUiInputaction via metaparse to a input element.
 *
 * HTML:
 *     <input type="name" class="placeholder-input ep-js" data-js=".presentationUiInputaction()" placeholder="0..7,5" value="" />
 *
 * @class jQuery.ui.presentationUiInputaction
 *
 * @uses jquery
 * @uses de_epages
 * @uses ep.dict
 * @uses jQuery.ui.widget
 *
 * @since 6.17.19
 */

/**
 * See `jQuery.ui.presentationUiInputaction` for details.
 *
 * @method presentationUiInputaction
 * @member jQuery
 *
 * @since 6.17.19
 */


define("de_epages/presentation/ui/inputaction", [
    'jquery/ui/widget',
    "ep",
    "de_epages",
    "$dict!ep/dict"
], function ($, ep, de_epages, epDict) {


    // Widget.
    $.widget('ui.presentationUiInputaction', {
        // span,

        options : {
            // onAfterReset: function(){}
        },

        _create : function () {
            var self = this,
                elem = self.element;

            // create reset button element
            self.span = $('<span class="ep-inputaction-span fa fa-reply" title="' + epDict.translate('Reset') + '"></span>');

            // register click event for reset button
            self.span.on('click', function () {
                // remove value
                elem.val('');
                // hide reset button
                self.span.css('visibility', 'hidden');
                // unset validation (if necessary)
                if (elem.data('uiUiValidate')) {
                    elem.data('uiUiValidate')._setValidStatus(true);
                    elem.data('uiUiValidate')._leave();
                }

                if(typeof self.options.onAfterReset === 'function'){
                    self.options.onAfterReset();
                }
            });

            // toggle visibility of reset button depending on the content of the input field
            self.span.css('visibility', elem.val() ? 'visible' : 'hidden');
            // append reset button after input element
            elem.after(self.span);

            // register keyup and paste event for input field
            elem.on('keyup.presentationUiInputaction paste.presentationUiInputaction', function () {
                var _this = this;

                // set timeout to ensure that the paste event works correctly
                window.setTimeout(function () {
                    // toggle visibility of reset button depending on the content of the input field
                    self.span.css('visibility', _this.value ? 'visible' : 'hidden');
                }, 0);
            });
        },

        destroy : function () {
            var self = this,
                elem = this.element;

            // unregister click event for reset button
            self.span && self.span.off('click');
            // remove reset button from DOM
            self.span.remove();

            // unregister keyup and paste for input element
            elem && elem.off('keyup.presentationUiInputaction paste.presentationUiInputaction');

            this._superApply(arguments);
        }

    });

    return de_epages;
});