define(['jquery', 'i18n', 'ui/component', 'handlebars', 'lib/handlebars/helpers', 'select2'], function ($$1, __, component, Handlebars, Helpers0, select2) { 'use strict';

    $$1 = $$1 && Object.prototype.hasOwnProperty.call($$1, 'default') ? $$1['default'] : $$1;
    __ = __ && Object.prototype.hasOwnProperty.call(__, 'default') ? __['default'] : __;
    component = component && Object.prototype.hasOwnProperty.call(component, 'default') ? component['default'] : component;
    Handlebars = Handlebars && Object.prototype.hasOwnProperty.call(Handlebars, 'default') ? Handlebars['default'] : Handlebars;
    Helpers0 = Helpers0 && Object.prototype.hasOwnProperty.call(Helpers0, 'default') ? Helpers0['default'] : Helpers0;

    if (!Helpers0.__initialized) {
      Helpers0(Handlebars);
      Helpers0.__initialized = true;
    }
    var Template = Handlebars.template(function (Handlebars,depth0,helpers,partials,data) {
      this.compilerInfo = [4,'>= 1.0.0'];
    helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
      var buffer = "", stack1, self=this, functionType="function", escapeExpression=this.escapeExpression;

    function program1(depth0,data) {
      
      var buffer = "", stack1, helper;
      buffer += "\n        <option ";
      stack1 = helpers['if'].call(depth0, (depth0 && depth0.selected), {hash:{},inverse:self.noop,fn:self.program(2, program2, data),data:data});
      if(stack1 || stack1 === 0) { buffer += stack1; }
      buffer += " value=\"";
      if (helper = helpers.value) { stack1 = helper.call(depth0, {hash:{},data:data}); }
      else { helper = (depth0 && depth0.value); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
      buffer += escapeExpression(stack1)
        + "\">\n            ";
      if (helper = helpers.label) { stack1 = helper.call(depth0, {hash:{},data:data}); }
      else { helper = (depth0 && depth0.label); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
      buffer += escapeExpression(stack1)
        + "\n        </option>\n        ";
      return buffer;
      }
    function program2(depth0,data) {
      
      
      return "selected";
      }

      buffer += "<div class=\"page-size-selector-container\">\n    <select class=\"select2\">\n        ";
      stack1 = helpers.each.call(depth0, (depth0 && depth0.options), {hash:{},inverse:self.noop,fn:self.program(1, program1, data),data:data});
      if(stack1 || stack1 === 0) { buffer += stack1; }
      buffer += "\n    </select>\n</div>\n";
      return buffer;
      });
    function pageSizeSelectorTpl(data, options, asString) {
      var html = Template(data, options);
      return (asString || true) ? html : $(html);
    }

    /**
     * This program 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; under version 2
     * of the License (non-upgradable).
     *
     * This program 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 this program; if not, write to the Free Software
     * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
     *
     * Copyright (c) 2019 (original work) Open Assessment Technologies SA ;
     */

    /**
     * Default config values
     * @type {Object}
     */
    const defaults = {
      defaultSize: 25,
      options: [{
        label: '25 ' + __('items per page'),
        value: 25
      }, {
        label: '50 ' + __('items per page'),
        value: 50
      }, {
        label: '75 ' + __('items per page'),
        value: 75
      }, {
        label: '100 ' + __('items per page'),
        value: 100
      }, {
        label: '200 ' + __('items per page'),
        value: 200
      }]
    };

    /**
     * Builds a select component with page size options
     *
     * @param {Object} config
     * @param {Number} [config.defaultSize] - selected page size
     * @param {Object} [config.items] - available options
     * @returns {pageSizeSelector}
     */
    function pageSizeSelectorFactory(config) {
      const pageSizeSelectorSpecs = {
        setSelectedOption() {
          const options = this.config.options;
          const defaultSize = parseInt(this.config.defaultSize, 10);
          let selectedOption;
          options.forEach(option => {
            if (parseInt(option.value, 10) === defaultSize) {
              selectedOption = option;
              option.selected = true;
            } else {
              option.selected = false;
            }
          });

          // if there is no option with provided default size use first option as default
          if (!selectedOption) {
            options[0].selected = true;
          }
        }
      };
      return component(pageSizeSelectorSpecs, defaults).setTemplate(pageSizeSelectorTpl).on('init', function onInit() {
        this.setSelectedOption();
      }).on('render', function onRender() {
        $$1('.select2', this.getElement()).select2({
          dropdownCssClass: 'page-size-dropdown',
          minimumResultsForSearch: Infinity
        }).on('change', e => {
          this.trigger('change', e.val);
        });
      }).after('render', function afterRender() {
        // Notify about the default value after render
        this.trigger('change', $$1('select', this.getElement()).val());
      }).on('destroy', function onDestroy() {
        $$1('.select2', this.getElement()).select2('destroy');
      }).init(config);
    }

    return pageSizeSelectorFactory;

});
