/* --------------------------------------------------------------
 icon_input.js 2018-09-14
 Gambio GmbH
 http://www.gambio.de
 Copyright (c) 2016 Gambio GmbH
 Released under the GNU General Public License (Version 2)
 [http://www.gnu.org/licenses/gpl-2.0.html]
 --------------------------------------------------------------
 */

/**
 * ## Icon Input Widget
 *
 * Turns normal input fields into input fields with a provided background image.
 *
 * ### Example
 *
 * The "icon-input" activates the widget and attaches the needed styles for the background image
 * which is provided by the `data-icon` attribute.
 *
 * ```html
 * <input data-gx-widget="icon_input" data-icon="url/to/image-file.png"/>
 * ```
 *
 * @todo Add automatic image dimension adjustment. Images - for example if they are too big in dimensions - won't scale correctly at the moment.
 *
 * @module Admin/Widgets/icon_input
 */
gx.widgets.module(
    'icon_input',

    ['xhr'],

    function (data) {

        'use strict';

        // ------------------------------------------------------------------------
        // VARIABLE DEFINITION
        // ------------------------------------------------------------------------

        var
            /**
             * Widget Reference
             *
             * @type {object}
             */
            $this = $(this),

            /**
             * Default Widget Options
             *
             * @type {object}
             */
            defaults = {},

            /**
             * Final Widget Options
             *
             * @type {object}
             */
            options = $.extend(true, {}, defaults, data),

            /**
             * Module Object
             *
             * @type {object}
             */
            module = {};

        // ------------------------------------------------------------------------
        // PRIVATE METHODS
        // ------------------------------------------------------------------------

        /**
         * Adds the dropdown functionality to the button.
         *
         * Developers can manually add new <li> items to the list in order to display more options to
         * the users.
         *
         * @private
         */
        const _setBackgroundImage = () => {
            const iconValue = $this.attr('data-icon');
            const langId = $this.attr('data-lang-id')

            if (undefined === iconValue && undefined === langId) {
                throw new Error('Whether data-lang-id or data-icon attribute is required!');
            }

            if (undefined !== langId) {
                jse.libs.xhr.get({
                    url: './admin.php?do=JSWidgetsAjax/iconInput&language_id=' + langId
                }).done(r => $this.css('background', 'url(' + r.iconUrl + ')' + ' no-repeat right 8px center / 20px white'));
            } else {
                $this.css('background', 'url(' + iconValue + ')' + ' no-repeat right 8px center white');
            }
        };

        // ------------------------------------------------------------------------
        // INITIALIZATION
        // ------------------------------------------------------------------------

        /**
         * Initialize method of the widget, called by the engine.
         */
        module.init = function (done) {
            _setBackgroundImage();
            done();
        };

        // Return data to module engine.
        return module;
    });