Ext.define("IceCap.component.TextArea", {

    xtype: "icecap-textarea",

    alias: [
        "widget-icecap-textarea"
    ],

    mixins: {
        field: "Ext.form.field.Field"
    },

    extend: "Ext.Component",

    baseCls: Ext.baseCSSPrefix + "form-text",

    height: 24,

    width: 100,

    maxLength: 0,

    maskRe: "",

    returnRe: /\r/g,

    renderTpl: [
        "<textarea id=\"{id}-input\"",
        "role=\"textbox\"",
        "type=\"text\"",
        "data-ref=\"inputEl\" ",
        "isInputField=true ",
        "<tpl if=\"readOnly\">",
            "readonly={readOnly} ",
        "</tpl>",
        "<tpl if=\"maxLength\">",
            "maxlength={maxLength} ",
        "</tpl>",
        "<tpl if=\"inputAttrTpl\">",
            " {inputAttrTpl} ",
        "</tpl>",
        "<tpl if=\"tabIdx != null\">",
            "tabindex=\"{tabIdx}\"",
        "</tpl>",
        "class=\"x-form-text-{ui} x-form-trigger-wrap-icecap-textarea-field icecap-inputEl\" ",
        "style=\"{style}",
    "\"><tpl if=\"value\">{[Ext.util.Format.htmlEncode(values.value)]}</tpl>",
    "</textarea>"
    ],

    childEls: [
        {
            name: "inputEl",
            itemId: "input"
        }
    ],

    listeners: {
        afterrender: {
            fn: function() {

                var i_self = this;
                var i_inputEl = i_self.inputEl;

                i_self.el.setStyle("padding", "0px");
                i_self.el.setStyle("background-color", "transparent");

                i_inputEl.on({
                    focus: {
                        fn: function() {
                            i_inputEl.addCls("x-form-trigger-wrap-focus");
                        }
                    },
                    blur: {
                        fn: function () {
                            i_inputEl.removeCls("x-form-trigger-wrap-focus");
                        }
                    },
                    input: {
                        fn: function(i_event) {

                            var value = i_inputEl.getValue();
                            i_self.fireEvent("change", i_self, value);
                        }
                    },
                    keyup: {
                        fn: function(i_event) {
                            i_self.fireEvent("keyup", i_self, i_event);
                        }
                    },
                    keypress:  {
                        fn: function(i_event) {

                            if ((i_event.ctrlKey && !i_event.altKey) || i_event.isSpecialKey()) {
                                return;
                            }

                            var s_key = i_event.event.key;

                            if (i_event.keyCode < 112 || i_event.keyCode > 123) {
                                if (i_self.maskRe) {
                                    if (!i_event.isSpecialKey() && !i_self.maskRe.test(s_key)) {
                                        if (!i_event.ctrlKey && s_key != "v") {
                                            i_event.stopEvent();
                                        }
                                        else {
                                            i_self.fireEvent("keydown", i_self, i_event);
                                        }
                                    }
                                    else {
                                        i_self.fireEvent("keydown", i_self, i_event);
                                    }
                                }
                                else {
                                    i_self.fireEvent("keydown", i_self, i_event);
                                }
                            }
                        }
                    },
                    keydown: {
                        fn: function (i_event) {

                            var s_key = i_event.event.key;

                            if (i_self.maskRe) {
                                if (!i_event.isSpecialKey() && !i_self.maskRe.test(s_key)) {
                                    if (!i_event.ctrlKey && s_key != "v") {
                                        i_event.stopEvent();
                                    }
                                    else {
                                        i_self.fireEvent("keydown", i_self, i_event);
                                    }
                                }
                                else {
                                    i_self.fireEvent("keydown", i_self, i_event);
                                }
                            }
                            else {
                                i_self.fireEvent("keydown", i_self, i_event);
                            }
                        }
                    },
                });
            }
        },
        beforerender: {
            fn: function () {

                var i_self = this;

                var o_data = i_self.renderData || i_self.data || {};

                var o_style = i_self.fieldStyle || i_self.style || {};

                Ext.apply(o_style, {
                    height: "100%",
                    display: "block",
                    width: "100%",
                    overflow:"hidden",
                    resize: "none"
                });

                var a_style = [];

                Ext.Object.each(o_style, function(s_key, value) {
                    a_style.push(s_key +":" + value);
                });


                Ext.applyIf(o_data, {
                    width: i_self.width || 100,
                    height: i_self.height || 30,
                    maxLength: i_self.maxLength || 0,
                    value: i_self.value,
                    style: a_style.join(";"),
                    inputAttrTpl: i_self.inputAttrTpl,
                    ui: i_self.ui,
                    readOnly: i_self.readOnly,
                    tabIdx: i_self.tabIndex || -1
                });

                i_self.renderData = i_self.data = o_data;
            }
        },
        keypress: {
            fn: function (i_field, i_event) {

                var i_self = this;

                var s_modified = i_self.getModified();

                var a_split = s_modified.split("");

                if (i_event.keyCode == Ext.event.Event.BACKSPACE) {
                    a_split.pop();
                }
                else if (i_event.key == Ext.event.Event.DELETE) {
                    a_split.shift();
                }
                else {
                    if (!i_event.isSpecialKey()) {
                        var s_key = i_event.event.key;
                        a_split.push(s_key);
                    }
                }

                s_modified = a_split.join("");

                i_self.setModified(s_modified);
            }
        },
        keydown: {
            fn: function(i_field, i_event) {

                var i_self = this;

                var s_modified = i_self.getModified();

                var a_split = s_modified.split("");

                if (i_event.keyCode == Ext.event.Event.BACKSPACE) {
                    a_split.pop();
                }
                else if (i_event.key == Ext.event.Event.DELETE) {
                    a_split.shift();
                }
                else {
                    if (!i_event.isSpecialKey()) {
                        var s_key = i_event.event.key;
                        a_split.push(s_key);
                    }
                }

                s_modified = a_split.join("");

                i_self.setModified(s_modified);
            }
        },
        focus: {
            fn: function (i_field) {

                if (i_field.readOnly) {
                    if (i_field.selectOnFocus) {
                        i_field.inputEl.dom.select();
                    }
                }
            },
            buffer: 10
        }
    },

    config: {
        modified: ""
    },

    constructor: function () {

        var i_self = this;

        i_self.callParent(arguments);
    },

    initComponent: function () {

        var i_self = this;

        i_self.initField();
        i_self.xtypesMap.field = true;
    },

    getValue: function() {

        var i_self = this;

        var value = i_self.mixins.field.getValue.call(i_self);

        if (i_self.inputEl) {
            value = i_self.inputEl.getValue();
        }

        return i_self.stripReturns(value);
    },

    getRawValue: function() {

        var i_self = this;
        var i_inputEl = i_self.inputEl;
        var s_value = i_inputEl.dom.value;
        return s_value;
    },

    setValue: function (value) {

        var i_self = this;

        i_self.mixins.field.setValue.call(i_self, value);

        if (i_self.inputEl) {
            i_self.inputEl.dom.value = value;
        }

        return value;
    },

    getFocusEl: function() {

        var i_self = this;
        var i_element;

        if (i_self.inputEl) {
            i_element = i_self.inputEl;
        }

        return i_element;
    },

    isDirty: function() {

        var i_self = this;
        var b_fieldDirty = i_self.mixins.field.isDirty.call(i_self);

        if (!b_fieldDirty) {
            b_fieldDirty = !Ext.isEmpty(i_self.getModified(), false);
        }

        return b_fieldDirty;
    },

    stripReturns: function(value) {
        if (value && typeof value === 'string') {
            value = value.replace(this.returnRe, '');
        }
        return value;
    }

});
