/* global Markdown */

Ext.define("Ext.ux.markdown.Panel", {

	extend: "Ext.panel.Panel",

	alias: "widget.markdown",

	mixins: {
		componentController: "Ext.ux.util.ComponentController",
		mashup: "Ext.mixin.Mashup"
	},

	refs: [
		{
			ref: "textarea",
			selector: "#markdowntextarea"
		},
		{
			ref: "toolbar",
			selector: "#markdowntoolbar"
		}
	],

	layout: "fit",

	config: {
		output: "markdown",
		textareaConfig: null,
		actions: "h1, h2, h3, bold, italic, link, quote, code, image, olist, ulist, sup, hr",
		actiontip: true,
		actionText: true,
		action: null
	},

	requiredScripts: [
		"/portfolio/app/ux/markdown/_css/icons.css",
		"/portfolio/app/ux/markdown/_css/preview.css"
	],

	initComponent: function() {

		var i_cmp = this;

		i_cmp.initComponentController();

		i_cmp.callParent(arguments);

		i_cmp.addDocked([
			{
				xtype: "markdowntoolbar",
				itemId: "markdowntoolbar",
				height: 30,
				dock: "top",
				actions: i_cmp.actions,
				actiontip: i_cmp.getActiontip(),
				actionText: i_cmp.getActionText(),
				action: i_cmp.getAction()
			}
		]);

		i_cmp.add([
			Ext.Object.merge({}, {
				xtype: "markdowntextarea",
				itemId: "markdowntextarea",
				value: i_cmp.value,
				fieldStyle: "margin: 0; border: 0 none;",
				isFormField: false
			}, i_cmp.getTextareaConfig() || {})
		]);

		// Add component control
		i_cmp.addControls();

		return i_cmp;
	},

	createPreviewWindow: function (s_html) {

		var i_cmp = this;

		Ext.widget("window", {
			title: "preview",
			closable: true,
			width: 600,
			height: "90%",
			iconCls: "markdown-preview",
			layout: "fit",
			autoShow: true,
			items: [
				{
					xtype: "container",
					itemId: "preview",
					padding: 15,
					html: s_html,
					border: 0
				}
			]
		});

		return i_cmp;
	},

	addControls: function () {

		var i_cmp = this;

		i_cmp.control({
			"toolbar": {
				"actionclick": i_cmp.onActionClick
			},
			"textarea": {
				"change": i_cmp.onChange
			}
		});

		return i_cmp;
	},

	onChange: function () {

		var i_cmp = this;

		if (!i_cmp.getEditor()) {
			return i_cmp;
		}

		var i_toolbar = i_cmp.getToolbar();
		var i_redo = i_toolbar.getButton("redo");
		var i_undo = i_toolbar.getButton("undo");
		var i_editor = i_cmp.getEditor();
		var b_redo = i_editor.undoManager.canRedo();
		var b_undo = i_editor.undoManager.canUndo();

		if (b_redo) {
			i_redo.enable();
		}
		else {
			i_redo.disable();
		}

		if (b_undo) {
			i_undo.enable();
		}
		else {
			i_undo.disable();
		}

		i_cmp.fireEvent("change", i_cmp, i_cmp.getValue());

		return i_cmp;
	},

	onActionClick: function (i_button, s_action, i_toolbar) {

		var i_cmp = this;
		var i_textarea = i_cmp.getTextarea();

		if (s_action == "preview") {

			var s_html = i_cmp.toSource().html;

			i_cmp.createPreviewWindow(s_html);
		}
		else {
			i_textarea.control(s_action);

			// Force a checkchange on the textarea!!
			i_textarea.checkChange();
		}

		return i_cmp;
	},

	getValue: function (s_type) {

		var i_cmp = this;
		var i_textarea = i_cmp.getTextarea();
		var s_output = i_cmp.getOutput(); // Output type - set as config (output: [markdown]/html)
		var s_value = i_cmp.value;

		if (i_textarea) {

			if (s_type) {
				s_output = s_type;
			}

			s_value = i_textarea.getValue();

			// Run through converter if HTML is wanted
			if (s_output == "html") {
				// Check if textarea has been rendered and the converter is available etc..
				var i_converter = i_cmp.getConverter();
				if (i_converter) {
					s_value = i_converter.makeHtml(s_value);
				};
			}
		}

		return s_value;
	},

	setValue: function (s_value) {

		var i_cmp = this;
		var i_textarea = i_cmp.getTextarea();

		if (i_textarea) {
			i_textarea.setValue(s_value);
		}

		i_cmp.value = s_value;

		return i_cmp;
	},

	toSource: function () {

		var i_cmp = this;
		var s_value = i_cmp.getValue();

		return i_cmp.getEditor().toSource(s_value);
	},

	getMarkdown: function () {

		return this.getTextarea().getMarkdown();
	},
	getConverter: function () {

		return this.getTextarea().getConverter();
	},
	getEditor: function () {

		return this.getTextarea().getEditor();
	}
});
