/*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,
        // initSize,

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

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

            // 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);
            });

            if (o.resize !== undefined && o.resize === true) {
                elem.on('change.presentationUiInputaction', function () {
                    self._resize(self);
                });
            }
        },

        _resize: function (self) {
            var o = self.options,
                elem = self.element,
                dummy,
                width,
                inputLength;

            // get initial values
            if (self.initWidth === undefined) {
                self.initWidth = elem.width();
                self.style = {
                    fontFamily: elem.css('font-family'),
                    fontSize: elem.css('font-size')
                };
            }

            // create dummy element to calculate the dimension
            dummy = $('<span />');
            dummy.html(elem.val());
            dummy.css({
                'display': 'absolute',
                'top': '-10000px',
                'left': '-10000px',
                'font-family': self.style.fontFamily,
                'font-size': self.style.fontSize
            });
            // append dummy to body and get its dimension
            $('body').append(dummy);
            width = dummy.width();

            // get the dimension
            inputLength = (width > self.initWidth) ? (width + 30) : self.initWidth;
            // set new dimension
            elem.width(inputLength);
            // remove element from document again
            dummy.remove();
            delete dummy;
        },

        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;
});