/**
 * Base class of the image element.
 */
Ext.define("Terrasoft.controls.ContentImageElement", {
	extend: "Terrasoft.controls.BaseContentElement",
	alternateClassName: "Terrasoft.ContentImageElement",

	//region Properties: Private

	/**
  * The configuration of the button image.
  * @private
  * @type {Object}
  */
	imageConfig: null,

	//endregion

	//region Properties: Protected

	/**
  * A collection of style classes for the tool container.
  * @protected
  * @type {String[]}
  */
	toolsWrapClasses: ["content-image-element-tools-wrap"],

	/**
  * A collection of style classes for the control container.
  * @protected
  * @type {String[]}
  */
	contentWrapClasses: ["content-image-element-wrap"],

	/**
  * CSS class for the image.
  * @protected
  * @type {String}
  */
	imageElClasses: "ts-content-image-element-full-size-element",

	/**
  * CSS class for the button container.
  * @protected
  * @type {String}
  */
	toolsContainerClass: "content-image-element-tools-container",

	/**
  * CSS class for placeholder.
  * @protected
  * @type {String}
  */
	placeholderClass: "content-image-element-placeholder",

	/**
  * Text for placeholder.
  * @protected
  * @type {String}
  */
	placeholder: "",

	/**
  * @inheritdoc Terrasoft.controls.AbstractContainer#defaultRenderTpl
  * @override
  */
	defaultRenderTpl: ["<div id=\"{id}-content-image-element-wrap\" style=\"{wrapStyles}\" class=\"{wrapClassName}\">", "<tpl if=\"hasImage\">", "<img id=\"{id}-content-image-element\" class=\"{imageElClasses}\" src=\"{imageSrc}\">", "<tpl else>", "<div id=\"{id}-content-image-placeholder\" class=\"{placeholderClass}\">", "<span>{placeholder}</span>", "</div>", "</tpl>", "<div class=\"{toolsContainerClass}\">", "<tpl for=\"tools\">", "{%this.renderTool(out, values)%}", "</tpl>", "</div>", "</div>"],

	//endregion

	//region Methods: Protected

	/**
  * The method returns the selectors of the control.
  * @protected
  * @return {Object} The selector object.
  */
	getSelectors: function () {
		var selectors = {
			toolsEl: "#" + this.id + "-content-image-element-tools",
			wrapEl: "#" + this.id + "-content-image-element-wrap",
			imageEl: "#" + this.id + "-content-image-element",
			placeholderEl: "#" + this.id + "-content-image-placeholder"
		};
		return selectors;
	},

	/**
  * @inheritdoc Terrasoft.BaseContentElement#getTplData
  * @override
  */
	getTplData: function () {
		var tplData = this.callParent(arguments);
		var hasImage = !Ext.isEmpty(this.imageConfig);
		var imageSrc = hasImage ? Terrasoft.ImageUrlBuilder.getUrl(this.imageConfig) : "";
		Ext.apply(tplData, {
			imageElClasses: this.imageElClasses,
			imageSrc: imageSrc,
			toolsContainerClass: this.toolsContainerClass,
			placeholder: Terrasoft.encodeHtml(this.placeholder),
			placeholderClass: this.placeholderClass,
			hasImage: hasImage
		});
		return tplData;
	},

	//endregion

	//region Methods: Public

	/**
  * Returns the configuration of the binding to the model. Implements the {@link Terrasoft.Bindable} mixin interface.
  * @override
  */
	getBindConfig: function () {
		var bindConfig = this.callParent(arguments);
		var elementConfig = {
			imageConfig: {
				changeMethod: "setImage"
			},
			placeholder: {
				changeMethod: "setPlaceholder"
			}
		};
		Ext.apply(elementConfig, bindConfig);
		return elementConfig;
	},

	/**
  * Updates the text for the placeholder.
  * @param {String} text Text for placeholder.
  */
	setPlaceholder: function (text) {
		if (text !== this.placeholder) {
			this.placeholder = text;
			if (Ext.isEmpty(this.imageConfig) && this.rendered) {
				this.reRender();
			}
		}
	},

	/**
  * Changes the picture.
  * @param {Object} imageConfig Configure a new picture.
  */
	setImage: function (imageConfig) {
		if (!Ext.Object.equals(imageConfig, this.imageConfig)) {
			this.imageConfig = imageConfig;
			if (this.rendered) {
				this.reRender();
			}
		}
	}

	//endregion

});