(function ($) {
    var ScenarioComparer = function (element, options) {
        this.init(element, options);
    };

    ScenarioComparer.prototype = {
        scenarios: [],
        $compareButtons: {},
        options: {},
        preloaderSettings: {
            overlayCSS: { backgroundColor: "#fff", opacity: 0.9 },
            css: { border: "none", backgroundColor: "transparent" },
            message: "<span><img class='valign-middle' src=\"/Content/images/loadFA.gif\")' />&nbsp;&nbsp;loading...</span>"
        },

        init: function (element, options) {
            var plugin = this;

            plugin.options = options;
            $(options.checkBoxSelector).change(function () { plugin.onInputChanged(this) });
            plugin.$compareButtons = $(options.compareButtonSelector);
            plugin.$compareButtons.click(function () { plugin.onCompareClick(this) });
            $(document).on("show.bs.modal", options.modalSelector, $.proxy(plugin.onModalShow, plugin));
            $(document).on("shown.bs.modal", options.modalSelector, $.proxy(plugin.onModalShown, plugin));
        },

        onModalShow: function (event) {
            var $modalBody = $(this.options.modalSelector + " .modal-body");
            $modalBody.html("");
        },

        onModalShown: function (event) {
            var
                plugin = this,
                $modal = $(this.options.modalSelector),
                $modalBody = $(this.options.modalSelector + " .modal-body"),
                projectId = $modal.data("project-id"),
                url = this.options.compareUrl;

            $modalBody.block(plugin.preloaderSettings);
            $(".blockUI.blockMsg").css("z-index", 9999); //modal is over loading message

            var ids = $.map(this.getScenariosByProject(projectId), function (item, key) {
                return item.scenarioId;
            });

            $modalBody.load(url, { ids: ids }, function (response, status, xhr) {
                $modalBody.unblock();
                if (status == "error") {
                    bootbox.alert("An error occurred while processing your request. Please, try again later.", function () {
                        $modal.modal("hide");
                    });
                } else {
                    plugin.loaded();
                }
            });
        },

        loaded: function () {
            var
                plugin = this,
                modalSelector = this.options.modalSelector,
                $modal = $(modalSelector),
                projectId = $modal.data("project-id");

            var gradient = 'linear-gradient(-135deg, #7030A0 20%, #475FBE 30%, #04ABED 40%, #3CBDAF 70%, #8ED054 80%)';
            var scenarios = this.getScenariosByProject(projectId);

            $.each(scenarios, function (index, item) {
                var selector = modalSelector + " .modal-body .magnify[data-scenario-id='" + item.scenarioId + "']",
                    magnify = $(selector),
                    percent = magnify.data("scenario-percent");

                magnify.bar(percent, "percent", true, gradient);
            });

            $(".activate-scenario").click(function () { plugin.onActivateClick(this) });
        },

        onActivateClick: function (button) {
            var plugin = this,
                $button = $(button),
                $modal = $(this.options.modalSelector),
                projectId = $modal.data("project-id"),
                scenarioId = $button.data("scenario-id"),
                scenarioStartDate = $button.data('scenario-start-date'),
                scenarioEndDate = $button.data('scenario-end-date'),
                isOptimal = ($button.data("is-optimal") == "True"),
                msg = isOptimal ? "Wise choice! Please confirm that you would like to activate the most optimal scenario." :
                                  "You’re the boss! Please confirm that you would like to activate a less than optimal scenario.";

            $button.scenarioStatusToggle({
                scenario: {
                    scenarioId: scenarioId,
                    projectId: projectId,
                    startDate: scenarioStartDate,
                    endDate: scenarioEndDate,
                },
                minStartDate: plugin.options.minStartDate,
                maxEndDate: plugin.options.maxEndDate,
                activationConfirmMessage: msg,
                saveButtonText: 'Yes',
                runType: 'OnDemand',
                alwaysShowConfirmation: true,
                success: function (args) {
                    location.href = location.pathname + $.query.SET("ptab", "scenarios").toString();
                },
                error: function (args) {
                    showErrorModal();
                },
            });
            $button.scenarioStatusToggle('toggleStatus');
        },

        onCompareClick: function (element) {
            var $button = $(element),
                projectId = $button.data("project-id"),
                scenarios = this.getScenariosByProject(projectId),
                columnsCount = scenarios.length + 1;

            var $modal = $(this.options.modalSelector);
            $modal.data("project-id", projectId);
            $modal.data("width", 196 * columnsCount);
            $modal.modal('show');
        },

        onInputChanged: function (element) {
            var $checkbox = $(element);
            var projectId = $checkbox.data("project-id"),
                scenarioId = $checkbox.data("scenario-id"),
                scenario = this.getScenario(scenarioId);

            if ($checkbox.prop("checked")) {
                if (scenario == null) {
                    this.scenarios.push({
                        projectId: projectId,
                        scenarioId: scenarioId
                    });
                }
            } else {
                if (scenario != null) {
                    var index = this.scenarios.indexOf(scenario);
                    this.scenarios.splice(index, 1);
                }
            }
            this.updateButtonState();
        },

        updateButtonState: function () {
            var plugin = this;
            $.each(this.$compareButtons, function (index, btn) {
                var $button = $(btn),
                    projectId = $button.data("project-id"),
                    scenarios = plugin.getScenariosByProject(projectId);

                if (scenarios.length < 2) {
                    $button.attr("disabled", "disabled");
                } else {
                    $button.removeClass("disabled");
                    $button.attr("disabled", null);
                    if (scenarios.length < 4) {
                        var selector = plugin.options.checkBoxSelector + "[comparable]:disabled[data-project-id='" + projectId + "']";
                        var $inputsToEnable = $(selector);
                        $inputsToEnable.attr("disabled", null);
                        $inputsToEnable.attr("title", "");
                    } else {
                        var selector = plugin.options.checkBoxSelector + "[comparable]:unchecked:enabled[data-project-id='" + projectId + "']";
                        var $inputsToDisable = $(selector);
                        $inputsToDisable.attr("disabled", "disabled");
                        $inputsToDisable.attr("title", "Please deselect one or more scenarios to make this selection.");
                    }
                }
            });
        },

        getScenariosByProject: function (projectId) {
            var matchedScenarios = this.scenarios.filter(function (item) {
                return item.projectId === projectId;
            });

            return matchedScenarios;
        },

        getScenario: function (scenarioId) {
            var matchedScenarios = this.scenarios.filter(function (item) {
                return item.scenarioId === scenarioId;
            });
            if (matchedScenarios.length > 0) {
                return matchedScenarios[0];
            }

            return null;
        }
    };

    $.fn.scenarioComparer = function (option, args) {
        return this.each(function () {
            var $this = $(this),
                data = $this.data('scenarioComparer'),
                options = $.extend({}, $.fn.scenarioComparer.defaults, $this.data(), typeof option === 'object' && option);

            if (!data) $this.data('scenarioComparer', (data = new ScenarioComparer(this, options)));
            if (typeof option === 'string')
                data[option].apply(data, [].concat(args));
        });
    };
    $.fn.scenarioComparer.defaults = {
        checkBoxSelector: "input.scenario-comparer",
        compareButtonSelector: "a.scenario-comparer",
        modalSelector: "#compare-scenarios-modal",
        compareUrl: "",
        minStartDate: null,
        maxEndDate: null,
    };

    $.fn.scenarioComparer.Constructor = ScenarioComparer;
}(jQuery));