/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/

define([
'jquery',
'mage/template',
'jquery-ui-modules/dialog',
'mage/translate'
], function ($, mageTemplate) {
'use strict';

$.widget('mage.translateInline', $.ui.dialog, {
options: {
translateForm: {
template: '#translate-form-template',
data: {
id: 'translate-inline-form',
message: 'Please refresh the page to see your changes after submitting this form.'
}
},
autoOpen: false,
translateArea: null,
modal: true,
dialogClass: 'popup-window',
width: '75%',
title: $.mage.__('Translate'),
height: 470,
position: {
my: 'left top',
at: 'center top',
of: 'body'
},
buttons: [{
text: $.mage.__('Submit'),
'class': 'action-primary',

/**
* Click
*/
click: function () {
$(this).translateInline('submit');
}
},
{
text: $.mage.__('Close'),
'class': 'action-close',

/**
* Click.
*/
click: function () {
$(this).translateInline('close');
}
}],

/**
* Open.
*/
open: function () {
var topMargin;

$(this).closest('.ui-dialog').addClass('ui-dialog-active');
topMargin = jQuery(this).closest('.ui-dialog').children('.ui-dialog-titlebar').outerHeight() + 45;
jQuery(this).closest('.ui-dialog').css('margin-top', topMargin);
},

/**
* Close.
*/
close: function () {
$(this).closest('.ui-dialog').removeClass('ui-dialog-active');
}
},

/**
* Translate Inline creation
* @protected
*/
_create: function () {
this.tmpl = mageTemplate(this.options.translateForm.template);
(this.options.translateArea && $(this.options.translateArea).length ?
$(this.options.translateArea) :
this.element.closest('body'))
.on('edit.editTrigger', $.proxy(this._onEdit, this));
this._super();
},

/**
* @param {*} templateData
* @return {*|jQuery|HTMLElement}
* @private
*/
_prepareContent: function (templateData) {
var data = $.extend({
items: templateData,
escape: $.mage.escapeHTML
}, this.options.translateForm.data);

this.data = data;

return $(this.tmpl({
data: data
}));
},

/**
* Render translation form and open dialog
* @param {Object} e - object
* @protected
*/
_onEdit: function (e) {
this.target = e.target;
this.element.html(this._prepareContent($(e.target).data('translate')));
this.open(e);
},

/**
* Submit.
*/
submit: function () {
if (this.formIsSubmitted) {
return;
}
this._formSubmit();
},

/**
* Send ajax request on form submit
* @protected
*/
_formSubmit: function () {
var parameters;

this.formIsSubmitted = true;
parameters = $.param({
area: this.options.area
}) + '&' + $('#' + this.options.translateForm.data.id).serialize();

$.ajax({
url: this.options.ajaxUrl,
type: 'POST',
data: parameters,
loaderContext: this.element,
showLoader: true
}).complete($.proxy(this._formSubmitComplete, this));
},

/**
* @param {Object} response
* @private
*/
_formSubmitComplete: function (response) {
this.close();
this.formIsSubmitted = false;
this._updatePlaceholder(response.responseJSON[this.data.items[0].original]);
},

/**
* @param {*} newValue
* @private
*/
_updatePlaceholder: function (newValue) {
var target = jQuery(this.target);

target.data('translate')[0].shown = newValue;
target.data('translate')[0].translated = newValue;
target.html(newValue);
},

/**
* Destroy translateInline
*/
destroy: function () {
this.element.off('.editTrigger');
this._super();
}
});
// @TODO move the "escapeHTML" method into the file with global utility functions
$.extend(true, $, {
mage: {
/**
* @param {String} str
* @return {Boolean}
*/
escapeHTML: function (str) {
return str ?
jQuery('<div/>').text(str).html().replace(/"/g, '&quot;') :
false;
}
}
});

return $.mage.translateInline;
});