define(['jquery', 'lodash', 'ui/component', 'handlebars', 'lib/handlebars/helpers', 'css!ui/mediaEditor/plugins/mediaAlignment/style.css', 'context'], function ($$1, _, component, Handlebars, Helpers0, style_css, context) { '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;
    context = context && Object.prototype.hasOwnProperty.call(context, 'default') ? context['default'] : context;

    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 = "", helper, options, helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression;


      buffer += "<div class=\"media-alignment\">\n    <fieldset>\n        <legend class=\"media-sizer-panel-label\">"
        + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Position", options) : helperMissing.call(depth0, "__", "Position", options)))
        + "</legend>\n        <label class=\"smaller-prompt\">\n            <input type=\"radio\" name=\"wrap-inline\"/>\n            <span class=\"icon-radio\"></span>\n            <span class=\"icon-wrap-inline\"></span>\n            "
        + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Inline", options) : helperMissing.call(depth0, "__", "Inline", options)))
        + "\n        </label>\n        <br>\n        <label class=\"smaller-prompt\">\n            <input type=\"radio\" name=\"wrap-left\"/>\n            <span class=\"icon-radio\"></span>\n            <span class=\"icon-wrap-left\"></span>\n            "
        + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Wrap image left", options) : helperMissing.call(depth0, "__", "Wrap image left", options)))
        + "\n        </label>\n        <br>\n        <label class=\"smaller-prompt\">\n            <input type=\"radio\" name=\"wrap-right\"/>\n            <span class=\"icon-radio\"></span>\n            <span class=\"icon-wrap-right\"></span>\n            "
        + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Wrap image right", options) : helperMissing.call(depth0, "__", "Wrap image right", options)))
        + "\n        </label>\n        <br>\n        <label class=\"smaller-prompt\">\n            <input type=\"radio\" name=\"tao-centered\"/>\n            <span class=\"icon-radio\"></span>\n            <span class=\"icon-align-center\"></span>\n            "
        + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Center", options) : helperMissing.call(depth0, "__", "Center", options)))
        + "\n        </label>\n    </fieldset>\n</div>\n";
      return buffer;
      });
    function tpl(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) 2021-2023  (original work) Open Assessment Technologies SA;
     */
    const FLOAT_LEFT_CLASS = 'wrap-left';
    const FLOAT_RIGHT_CLASS = 'wrap-right';
    const CENTER_CLASS = 'tao-centered';

    /**
     * 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) 2021  (original work) Open Assessment Technologies SA;
     *
     * @author Juan Luis Gutierrez Dos Santos <juanluis.gutierrezdossantos@taotesting.com>
     */

    /**
     * Creates mediaAlignment component
     * @param $container
     * @param media
     * @fires "changed" - on State changed
     * return {component|*}
     */
    function mediaAlignmentFactory($container, media) {
      let $template;
      const mediaAlignmentComponent = component({
        /**
         * Apply configurations to the view
         */
        update(conf) {
          $template.find('input:checked').prop('checked', false);
          $template.find(`input[name="${conf}"]`).prop('checked', true);
          switch (conf) {
            case FLOAT_RIGHT_CLASS:
              conf = 'right';
              break;
            case FLOAT_LEFT_CLASS:
              conf = 'left';
              break;
            case CENTER_CLASS:
              conf = 'center';
              break;
            default:
              conf = 'default';
              break;
          }
          media.align = conf;
          this.trigger('change', media);
        }
      });
      mediaAlignmentComponent.on('init', function () {
        this.render($container);
      }).on('render', function () {
        $template = $$1(tpl());
        $template.appendTo($container);
        let container = media.$node[0].parentNode;
        if (media.$node.parents('figure').length) {
          // if figure parent exists then need to use figure container
          container = media.$node.parents('figure')[0].parentNode;
        }
        const classListTag = container.classList;
        if (classListTag.contains(FLOAT_RIGHT_CLASS)) {
          this.update(FLOAT_RIGHT_CLASS);
        } else if (classListTag.contains(FLOAT_LEFT_CLASS)) {
          this.update(FLOAT_LEFT_CLASS);
        } else if (classListTag.contains(CENTER_CLASS)) {
          this.update(CENTER_CLASS);
        } else {
          this.update('wrap-inline');
        }
        $template.on('click', event => {
          event.target.name && this.update(event.target.name);
        });
      }).on('destroy', function () {
        $template.remove();
      });
      _.defer(() => mediaAlignmentComponent.init());
      return mediaAlignmentComponent;
    }

    return mediaAlignmentFactory;

});
