define(['common'], function (Common) {

    var aq = function (p, sectionid, question) {
        this.sectionid = sectionid;
        this.question = question;
        this.holder = null;
        this.sectionmodule = p;
        this.datasaved = false;
    };
    aq.prototype.description = "Add or edit question";
    aq.prototype.version = "1.0.0.0";
    aq.prototype.onsave = null;

    var namecontrol = undefined;
    var questiontypecontrol = undefined;
    var isrequiredcontrol = undefined;
    var cancommentcontrol = undefined;
    var severitylevelcontrol = undefined;
    var isimportantcontrol = undefined;
    var displaytextcontrol = undefined;
    var notescontrol = undefined;
    var optiontr = undefined;
    var optiontd = undefined;
    var options = [];
    var questiontype = undefined;
    aq.prototype.createContent = function () {
        options = [];
        var _this = this;
        var content = $('<div></div>');

        function createHeader() {
            var header = $('<div></div>');

            var funcs = $('<div class="function_title"></div>');
            if (sectiontype == 0) {
                var btn = $('<span class="sbutton iconsave">' + GetTextByKey("P_IPT_SAVE", "Save") + '</span>').click(function () {
                    saveData(0);
                });
                funcs.append(btn);
                btn = $('<span class="sbutton iconsave">' + GetTextByKey("P_IPT_SAVE1", "Save and Exit") + '</span>').click(function () {
                    saveData(1);
                });
                funcs.append(btn);
                btn = $('<span class="sbutton iconexit">' + GetTextByKey("P_IPT_SAVE2", "Exit Without Saving") + '</span>').click(function () {
                    showRightPopup(false);
                    if (_this.datasaved)
                        _this.sectionmodule.refresh();
                });
                funcs.append(btn);
            }
            else {
                header.append($('<div class="function_title" style="background-color:#ddd;font-size:16px;"></div>').text(_this.question ? GetTextByKey("P_IPT_EDITQUESTION", 'Edit Question') : GetTextByKey("P_IPT_ADDQUESTION", 'Add Question')));
                if (!templatereadonly && (!_this.question || (_this.question && !_this.question.IsLink))) {
                    //if (!_this.question || (_this.question && !_this.question.IsLink)) {
                    var btn = $('<span class="sbutton iconsave">' + GetTextByKey("P_IPT_OK", "OK") + '</span>').click(function () {
                        var item = getData();
                        if (!item)
                            return;
                        if (_this.onsave)
                            _this.onsave(item);
                        $('#right_popup1').empty().hide();
                    });
                    funcs.append(btn);
                }
                btn = $('<span class="sbutton iconexit">' + GetTextByKey("P_IPT_CANCEL", "Cancel") + '</span>').click(function () {
                    $('#right_popup1').empty().hide();
                });
                funcs.append(btn);
            }
            header.append(funcs)

            return header;
        }

        function createQuestionContent() {
            var div_main = $('<div class="content_main" style="overflow: auto;"></div>');
            var div_content = $('<div class="edit-content"></div>');
            div_main.append(div_content);
            var tb = $('<table style="line-height: 35px;"></table>');
            div_content.append(tb);

            var tr = $('<tr></tr>');
            tb.append(tr);
            tr.append('<td class="label">' + GetTextByKey("P_IPT_NAME_COLON", "Name:") + '<span class="redasterisk">*</span></td>');
            namecontrol = $('<input type="text" maxlength="100"/>');
            var addiText = $('<span class="spanbtn iconmultitext" style="font-size:14px;" title="' + GetTextByKey("P_IPT_XXX", "Language Selection") + '"/>');
            addiText.click(function () {
                Common.createMultiTextDialog(namecontrol, _this.question);
            });
            tr.append($('<td></td>').append(namecontrol).append(addiText));

            tr = $('<tr></tr>');
            tb.append(tr);
            tr.append('<td class="label">' + GetTextByKey("P_IPT_DISPLAYTEXT_COLON", "Display Text:") + '<span  class="redasterisk">*</span></td>');
            displaytextcontrol = $('<input type="text" maxlength="1000" />');
            addiText = $('<span class="spanbtn iconmultitext" style="font-size:14px;" title="' + GetTextByKey("P_IPT_XXX", "Language Selection") + '"/>');
            addiText.click(function () {
                Common.createMultiTextDialog(displaytextcontrol, _this.question);
            });
            tr.append($('<td></td>').append(displaytextcontrol).append(addiText));

            tr = $('<tr></tr>');
            tb.append(tr);
            tr.append('<td class="label">Type:</td>');
            questiontypecontrol = createQuestionType();
            questiontypecontrol.change(function () {
                questionTypeChange();
            });
            tr.append($('<td></td>').append(questiontypecontrol));

            optiontr = $('<tr style="display:none;"></tr>');
            tb.append(optiontr);
            optiontr.append('<td class="label"></td>');
            var btn_additem = $('<span class="sbutton iconadd">Add</span>').click(function () {
                addOption();
            });
            optiontd = $('<td></td>').append(btn_additem);
            optiontr.append(optiontd);

            tr = $('<tr></tr>');
            tb.append(tr);
            tr.append('<td class="label" style="vertical-align:inherit;">Is Required:</td>');
            var table = $('<table></table>');
            tr.append($('<td></td>').append(table));

            tr = $('<tr></tr>');
            table.append(tr);
            isrequiredcontrol = $('<input type="checkbox"/>');
            tr.append($('<td style="width:75px;"></td>').append(isrequiredcontrol));
            cancommentcontrol = $('<input type="checkbox" style="margin-left:10px;"  />');
            tr.append($('<td style="width:155px;"><label style="">Can Comment:</label></td>').append(cancommentcontrol));
            isimportantcontrol = $('<input type="checkbox" style="margin-left:10px;" />');
            tr.append($('<td><label>Is Important:</label></td>').append(isimportantcontrol));

            tr = $('<tr></tr>');
            tb.append(tr);
            tr.append('<td class="label">Severity Level:</td>')
            severitylevelcontrol = createSeverityLevel();
            tr.append($('<td></td>').append(severitylevelcontrol));

            tr = $('<tr></tr>');
            tb.append(tr);
            tr.append('<td class="label">Notes:</td>');
            notescontrol = $('<textarea id="dialog_notes" maxlength="1000" style="width: 400px; margin-top: 6px;"></textarea>');
            tr.append($('<td></td>').append(notescontrol));

            return div_main;
        }

        var option = function (op) {
            this.option = op;
            this.dialog_text = null;
            this.dialog_bgcolor = null;
            this.dialog_severitylevel = null;
            this.holder = null;
            this.removable = true;
            if (op) {
                if (op.removable == false)
                    this.removable = false;
                else
                    this.removable = true;
            }
        };

        option.prototype.getContentValue = function () {
            var option = this.option || {};
            option.Text = this.dialog_text.val();
            var texts = this.dialog_text.data("texts");
            if (texts) {
                option.LocalTexts = texts;
            }
            option.BackgroundColor = this.dialog_bgcolor.val();
            option.SeverityLevel = this.dialog_severitylevel.val();
            return option;
        }

        option.prototype.removeOption = function () {
            this.holder.remove();
            options.splice(options.indexOf(this), 1);
        }

        option.prototype.createContent = function () {
            var _thisop = this;
            var tb = $('<table style="border: 1px solid #a8a8a8; width:700px;margin-top:2px;"></table>');
            this.holder = tb;
            var tr = $('<tr></tr>');
            tb.append(tr);
            var optext = $('<input type="text" style="width:240px;margin-left:5px;"/>');
            this.dialog_text = optext;
            var addiText = $('<span class="spanbtn iconmultitext" style="font-size:14px;" title="' + GetTextByKey("P_IPT_XXX", "Language Selection") + '"/>');
            addiText.click(function () {
                Common.createMultiTextDialog(optext, _this.question);
            });
            tr.append($('<td style="width:295px;"><span class="redasterisk">*</span></td>').append(this.dialog_text).append(addiText));

            td = $('<td style="width:76px;"></td>');
            tr.append(td);
            td.append($('<label>' + GetTextByKey("P_IPT_SEVERITYLEVEL", "Severity Level") + '</label>'));
            this.dialog_severitylevel = createSeverityLevel();
            this.dialog_severitylevel.css('width', 100);
            tr.append($('<td></td>').append(this.dialog_severitylevel));
            var bg_label = $('<label>' + GetTextByKey("P_IPT_BACKGROUNDCOLOR", "Background Color") + '</label>');
            td = $('<td style="width:100px;"></td>').append(bg_label);
            tr.append(td);
            this.dialog_bgcolor = $('<input style="width:100px;"/>');
            var bgcolor = $('<div></div>')
            bgcolor.append(this.dialog_bgcolor);
            td = $('<td></td>').append(bgcolor);
            tr.append(td);
            initColorCtrl(this.dialog_bgcolor);

            td = $('<td></td>');
            tr.append(td);
            if (_thisop.removable) {
                var deleteoptionbtn = $('<em class="spanbtn icondelete"></em>');
                td.append(deleteoptionbtn.click(function () {
                    _thisop.removeOption();
                }));
            }

            if (questiontype === "5") {
                this.dialog_text.attr('disabled', 'disabled');
            }
            //else if (questiontype === "8") {
            //    bg_label.hide();
            //    bgcolor.hide();
            //    tb.css('width', 324);
            //}


            function updateOptionContent() {
                var op = _thisop.option;
                if (op) {
                    _thisop.dialog_text.val(op.Text).data("texts", op.LocalTexts);
                    _thisop.dialog_bgcolor.spectrum("set", op.BackgroundColor);
                    _thisop.dialog_severitylevel.val(op.SeverityLevel);
                }
            }

            updateOptionContent();
            return tb;
        }

        function updateContent() {
            var question = _this.question;
            if (question) {
                namecontrol.val(question.Name).data("texts", question.LocalNames);
                displaytextcontrol.val(question.DisplayText).data("texts", question.LocalDisplayTexts);
                questiontypecontrol.val(question.QuestionType);
                questionTypeChange();
                isrequiredcontrol.attr('checked', question.IsRequired);
                cancommentcontrol.attr('checked', question.CanComment);
                isimportantcontrol.attr('checked', question.IsImportant);
                severitylevelcontrol.val(question.SeverityLevel);
                notescontrol.val(question.Notes);
            }
        }

        function setDisabled() {
            namecontrol.prop('disabled', true);
            displaytextcontrol.prop('disabled', true);
            questiontypecontrol.prop('disabled', true);
            isrequiredcontrol.prop('disabled', true);
            cancommentcontrol.prop('disabled', true);
            isimportantcontrol.prop('disabled', true);
            severitylevelcontrol.prop('disabled', true);
            notescontrol.prop('disabled', true);
        }

        function questionTypeChange() {
            options = [];
            optiontd.find('table').remove();
            var type = questiontypecontrol.val();
            questiontype = type;
            if (['5', '8', '9'].indexOf(type) >= 0) {
                optiontr.show();

                if (type === "5") {
                    var ynops = [{ 'Text': GetTextByKey("P_IPT_YES", 'Yes'), 'BackgroundColor': '#0F0', 'Value': 'Yes', 'SeverityLevel': 0 }, { 'Text': GetTextByKey("P_IPT_NO", 'No'), 'BackgroundColor': '#F00', 'Value': 'No', 'SeverityLevel': 0 }];
                    for (var i = 0; i < ynops.length; i++) {
                        var op = ynops[i]; if (_this.question) {
                            if (i < _this.question.SelectItems.length) {
                                op.BackgroundColor = _this.question.SelectItems[i].BackgroundColor;
                                op.SeverityLevel = _this.question.SelectItems[i].SeverityLevel;
                                op.LocalTexts = _this.question.SelectItems[i].LocalTexts;
                            }
                        }
                        op.removable = false;
                        addOption(op);
                    }
                    optiontr.find('.sbutton').hide();
                }
                else {
                    optiontr.find('.sbutton').show();
                    if (_this.question) {
                        for (var i = 0; i < _this.question.SelectItems.length; i++) {
                            addOption(_this.question.SelectItems[i]);
                        }
                    }
                    else
                        addOption();
                }
            }
            else {
                optiontr.hide();
            }
        }

        function addOption(item) {
            var op = new option(item);
            var tb = op.createContent();
            options.push(op);
            optiontd.append(tb);
        }

        function getData() {
            var item = {
                'Name': namecontrol.val(),
                'QuestionType': questiontypecontrol.val(),
                'IsRequired': isrequiredcontrol.prop('checked'),
                'CanComment': cancommentcontrol.prop('checked'),
                'IsImportant': isimportantcontrol.prop('checked'),
                'SeverityLevel': severitylevelcontrol.val(),
                'DisplayText': displaytextcontrol.val(),
                'Notes': notescontrol.val()
            };

            var alerttitle;
            if (_this.question) {
                item.Id = _this.question.Id;
                alerttitle = GetTextByKey("P_IPT_EDITQUESTION", "Edit Question");
            } else {
                alerttitle = GetTextByKey("P_IPT_ADDQUESTION", "Add Question");
            }

            var texts = namecontrol.data("texts");
            if (texts) {
                item.LocalNames = texts;
            }
            texts = displaytextcontrol.data("texts");
            if (texts) {
                item.LocalDisplayTexts = texts;
            }

            item.SelectItems = [];
            if (options.length > 0) {
                for (var i = 0; i < options.length; i++) {
                    var selectitem = options[i].getContentValue();
                    if (!selectitem.Text || selectitem.Text.length == 0) {
                        showAlert(GetTextByKey("P_IPT_OPTIONNAMECANNOTBEEMPTY", 'Option name cannot be empty.'), alerttitle);
                        return false;
                    }
                    item.SelectItems.push(selectitem)
                }
            }

            if (!item.Name || item.Name.length == 0) {
                showAlert(GetTextByKey("P_IPT_NAMENOTBEEMPTY", 'Name cannot be empty.'), alerttitle);
                return false;
            }
            if (!item.DisplayText || item.DisplayText.length == 0) {
                showAlert(GetTextByKey("P_IPT_DISPLAYTEXTNOTBEEMPTY", 'Display Text cannot be empty.'), alerttitle);
                return false;
            }
            if ((item.QuestionType === "8" || item.QuestionType === "9") && item.SelectItems.length == 0) {
                showAlert(GetTextByKey("P_IPT_THEREMUSTBEATLEASTONECHOICE", 'There must be at least one choice.'), alerttitle);
                return false;
            }

            return item;
        }

        saveData = function (exit) {
            var item = getData();
            if (!item) return;

            var param = htmlencode(JSON.stringify(item));
            param = JSON.stringify([teamintelligence, _this.sectionid, param]);

            inspectionrequest("SaveGlobalQuestion", param, function (data) {
                if (typeof (data) === "string") {
                    showAlert(data, GetTextByKey("P_IPT_SAVEQUESTION", 'Save Question'));
                } else {
                    if (!_this.question) {
                        _this.question = { 'Id': data[0] };
                    }
                    if (exit == 0) {
                        _this.datasaved = true;
                        showAlert(GetTextByKey("P_IPT_SAVSUCCESSFULLY", 'Saved successfully.'), GetTextByKey("P_IPT_SAVEQUESTION", 'Save Question'));
                    }
                    if (exit == 1) {
                        _this.sectionmodule.refresh();
                        showRightPopup(false);
                    }
                }
            }, function (err) {
                showAlert(GetTextByKey("P_IPT_FAILEDTOSAVEQUESTION", 'Failed to save question.'), GetTextByKey("P_IPT_SAVEQUESTION", 'Save Question'));
            });
        }

        content.append(createHeader());
        content.append(createQuestionContent());
        updateContent();
        if (templatereadonly)
            setDisabled();
        return content;
    }




    function initColorCtrl(ipt_color) {
        ipt_color.spectrum({
            allowEmpty: true,
            color: "#FFF",
            showInput: true,
            containerClassName: "full-spectrum",
            showInitial: true,
            showPalette: true,
            showSelectionPalette: true,
            showAlpha: true,
            maxPaletteSize: 10,
            preferredFormat: "hex",
            localStorageKey: "spectrum.demo",
            chooseText: GetTextByKey("P_IPT_OK", "OK"),
            cancelText: GetTextByKey("P_IPT_CANCEL", "Cancel"),
            clearText: GetTextByKey("P_SPECTRUM_CLEARCOLORSELECTION", "Clear Color Selection"),
            noColorSelectedText: GetTextByKey("P_SPECTRUM_NOCOLORSELECTED", "No Color Selected"),
            move: function (color) {
                if (color)
                    ipt_color.val(color.toHexString().toUpperCase()); // #ff0000
            },
            show: function () {

            },
            beforeShow: function () {

            },
            hide: function (color) {
                if (color) {
                    ipt_color.val(color.toHexString().toUpperCase()); // #ff0000
                }
            },

            palette: [
                ["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)", /*"rgb(153, 153, 153)","rgb(183, 183, 183)",*/
                    "rgb(204, 204, 204)", "rgb(217, 217, 217)", /*"rgb(239, 239, 239)", "rgb(243, 243, 243)",*/ "rgb(255, 255, 255)"],
                ["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)",
                    "rgb(0, 255, 255)", "rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)"],
                ["rgb(230, 184, 175)", "rgb(244, 204, 204)", "rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)",
                    "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)", "rgb(217, 210, 233)", "rgb(234, 209, 220)",
                    "rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)", "rgb(182, 215, 168)",
                    "rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)",
                    "rgb(204, 65, 37)", "rgb(224, 102, 102)", "rgb(246, 178, 107)", "rgb(255, 217, 102)", "rgb(147, 196, 125)",
                    "rgb(118, 165, 175)", "rgb(109, 158, 235)", "rgb(111, 168, 220)", "rgb(142, 124, 195)", "rgb(194, 123, 160)",
                    "rgb(166, 28, 0)", "rgb(204, 0, 0)", "rgb(230, 145, 56)", "rgb(241, 194, 50)", "rgb(106, 168, 79)",
                    "rgb(69, 129, 142)", "rgb(60, 120, 216)", "rgb(61, 133, 198)", "rgb(103, 78, 167)", "rgb(166, 77, 121)",
                    /*"rgb(133, 32, 12)", "rgb(153, 0, 0)", "rgb(180, 95, 6)", "rgb(191, 144, 0)", "rgb(56, 118, 29)",
                    "rgb(19, 79, 92)", "rgb(17, 85, 204)", "rgb(11, 83, 148)", "rgb(53, 28, 117)", "rgb(116, 27, 71)",*/
                    "rgb(91, 15, 0)", "rgb(102, 0, 0)", "rgb(120, 63, 4)", "rgb(127, 96, 0)", "rgb(39, 78, 19)",
                    "rgb(12, 52, 61)", "rgb(28, 69, 135)", "rgb(7, 55, 99)", "rgb(32, 18, 77)", "rgb(76, 17, 48)"]
            ]
        });
    }

    function createQuestionType() {
        var items = [];
        items.push({ 'Key': 0, "Value": "Single Line Text" });
        items.push({ 'Key': 1, "Value": "Multiple Line Text" });
        items.push({ 'Key': 2, "Value": "Email (Manual)" });
        items.push({ 'Key': 14, "Value": "Email (Drop Down)" });
        items.push({ 'Key': 3, "Value": "Number" });
        items.push({ 'Key': 4, "Value": "Integer" });
        items.push({ 'Key': 5, "Value": "Yes Or No" });
        items.push({ 'Key': 6, "Value": "Date" });
        items.push({ 'Key': 7, "Value": "Date And Time" });
        items.push({ 'Key': 8, "Value": "Drop Down" });
        items.push({ 'Key': 9, "Value": "List" });
        items.push({ 'Key': 10, "Value": "Picture" });
        if (!teamintelligence) {
            items.push({ 'Key': 11, "Value": "Odometer" });
            items.push({ 'Key': 12, "Value": "Engine Hours" });
            items.push({ 'Key': 13, "Value": "Fuel Remaining" });
        }
        var sel = $('<select style="width:324px; height:22px;"></select>');
        for (var i = 0; i < items.length; i++) {
            var item = items[i];
            sel.append('<option value="' + item.Key + '">' + item.Value + '</option>');
        }
        return sel;
    }

    function createSeverityLevel() {
        var items = [];
        items.push({ 'Key': 0, "Value": "None" });
        items.push({ 'Key': 1, "Value": "Low" });
        items.push({ 'Key': 2, "Value": "Medium" });
        items.push({ 'Key': 3, "Value": "High" });
        var sel = $('<select style="width:324px;height:22px;"></select>');
        for (var i = 0; i < items.length; i++) {
            var item = items[i];
            sel.append('<option value="' + item.Key + '">' + item.Value + '</option>');
        }
        return sel;
    }

    return aq;
});