/* For licensing terms, see /license.txt */

(function (window, $) {
    "use strict";

    function getPointOnImage(referenceElement, x, y) {
        var pointerPosition = {
                left: x + window.scrollX,
                top: y + window.scrollY
            },
            canvasOffset = {
                x: referenceElement.getBoundingClientRect().left + window.scrollX,
                y: referenceElement.getBoundingClientRect().top + window.scrollY
            };

        return {
            x: Math.round(pointerPosition.left - canvasOffset.x),
            y: Math.round(pointerPosition.top - canvasOffset.y)
        };
    }

    /**
     * @param {Object} attributes
     * @constructor
     */
    var SvgElementModel = function (attributes) {
        this.attributes = attributes;
        this.id = 0;
        this.questionId = 0;

        this.changeEvents = [];
        this.destroyEvents = [];
    };
    /**
     * @param {string} key
     * @param {*} value
     */
    SvgElementModel.prototype.set = function (key, value) {
        this.attributes[key] = value;

        this.changeEvents.forEach(function (event) {
            event();
        });
    };
    SvgElementModel.prototype.get = function (key) {
        return this.attributes[key];
    };
    SvgElementModel.prototype.destroy = function () {
        this.destroyEvents.forEach(function (event) {
            event();
        });
    };
    /**
     * @param {string} eventName
     * @param {(SvgElementModel~changeEvents|SvgElementModel~destroyEvents)} callback
     */
    SvgElementModel.prototype.on = function (eventName, callback) {
        this[eventName + 'Events'].push(callback);
    };
    /**
     * @abstract
     * @static
     * @param {Object} info
     * @returns {SvgElementModel}
     */
    SvgElementModel.decode = function (info) {
        return new this();
    };
    /**
     * @abstract
     * @returns {string}
     */
    SvgElementModel.prototype.encode = function () {
        return "";
    };

    /**
     * @param {Object} userAttributes
     * @constructor
     * @extends SvgElementModel
     */
    var SvgPathModel = function (userAttributes) {
        var attributes = $.extend({
            color: "#FF0000",
            points: []
        }, userAttributes);

        SvgElementModel.call(this, attributes);
    };
    SvgPathModel.prototype = Object.create(SvgElementModel.prototype);
    SvgPathModel.prototype.addPoint = function (x, y) {
        x = parseInt(x);
        y = parseInt(y);

        var points = this.get("points");
        points.push([x, y]);

        this.set("points", points);
    };
    SvgPathModel.prototype.encode = function () {
        var pairedPoints = [];
        var typeProperties = [
            this.get("color"),
        ];

        this.get("points").forEach(function (point) {
            pairedPoints.push(
                point.join(";")
            );
        });

        return "P;" + typeProperties.join(";") + ")(" + pairedPoints.join(")(");
    };
    /**
     * @static
     * @param {Object} pathInfo
     * @returns {SvgPathModel}
     */
    SvgPathModel.decode = function (pathInfo) {
        pathInfo.points = pathInfo.points.map(function (point) {
            return [point.x, point.y];
        });

        return new SvgPathModel(pathInfo);
    };

    /**
     * @param {Object} userAttributes
     * @constructor
     * @extends SvgElementModel
     */
    var SvgTextModel = function (userAttributes) {
        var attributes = $.extend({
            text: "",
            x: 0,
            y: 0,
            color: "#FF0000",
            fontSize: 20
        }, userAttributes);

        SvgElementModel.call(this, attributes);
    };
    SvgTextModel.prototype = Object.create(SvgElementModel.prototype);
    SvgTextModel.prototype.encode = function () {
        var typeProperties = [
            this.get("color"),
            this.get("fontSize"),
        ];

        return "T;" + typeProperties.join(";") + ")(" + this.get("text") + ")(" + this.get("x") + ';' + this.get("y");
    };
    /**
     * @static
     * @param {Object} textInfo
     * @returns {SvgTextModel}
     */
    SvgTextModel.decode = function (textInfo) {
        return new SvgTextModel(textInfo);
    };

    /**
     * @param {SvgElementModel} model
     * @constructor
     */
    var SvgElementView = function (model) {
        var self = this;

        this.model = model;
        this.model.on('change', function () {
            self.render();
        });
        this.model.on('destroy', function () {
            self.el.remove();
        });
    };

    /**
     * @param {SvgPathModel} model
     * @constructor
     * @extends SvgElementView
     */
    var SvgPathView = function (model) {
        SvgElementView.call(this, model);

        this.el = document.createElementNS("http://www.w3.org/2000/svg", "path");
        this.el.setAttribute("fill", "transparent");
    };
    SvgPathView.prototype = Object.create(SvgElementView.prototype);
    SvgPathView.prototype.render = function () {
        var d = "";

        $.each(
            this.model.get("points"),
            function (i, point) {
                d += (i === 0) ? "M" : " L ";
                d += point[0] + " " + point[1];
            }
        );

        this.el.setAttribute("d", d);
        this.el.setAttribute('stroke', this.model.get('color'));
        this.el.setAttribute("stroke-width", "3");

        return this;
    };

    /**
     * @param {SvgTextModel} model
     * @constructor
     * @extends SvgElementView
     */
    var SvgTextView = function (model) {
        SvgElementView.call(this, model);

        this.el = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        this.el.setAttribute('stroke', 'none');
    };
    SvgTextView.prototype = Object.create(SvgElementView.prototype);
    SvgTextView.prototype.render = function () {
        this.el.setAttribute('x', this.model.get('x'));
        this.el.setAttribute('y', this.model.get('y'));
        this.el.setAttribute('fill', this.model.get('color'));
        this.el.setAttribute('font-size', this.model.get('fontSize'));
        this.el.textContent = this.model.get('text');

        return this;
    };

    /**
     * @param {SvgElementModel} model
     * @constructor
     */
    var ControllerView = function (model) {
        var self = this;

        this.model = model;
        this.model.on('change', function () {
            self.render();
        });
        this.model.on('destroy', function () {
            self.el.remove();
        });

        var elChoice = (function () {
            var input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'choice[' + self.model.questionId + '][' + self.model.id + ']';

            return input;
        })();

        var elHotspot = (function () {
            var input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'hotspot[' + self.model.questionId + '][' + self.model.id + ']';

            return input;
        })();

        var elText = (function () {
            var input = document.createElement('input');
            input.type = 'text';
            input.className = 'form-control';
            input.disabled = self.model instanceof SvgPathModel;

            return input;
        })();
        elText.addEventListener('change', function () {
            commandsHistory.add(new TextElementCommand(self.model, this.value));

            self.model.set('text', this.value);
        })

        var txtColor = (function () {
            var input = document.createElement('input');
            input.type = 'color';
            input.style.border = '0 none';
            input.style.padding = '0';
            input.style.margin = '0';
            input.style.width = '26px';
            input.style.height = '26px';
            input.style.lineHeight = '28px';
            input.style.verticalAlign = 'middle';

            return input;
        })();
        txtColor.addEventListener('change', function () {
            commandsHistory.add(new ColorElementCommand(self.model, this.value));

            self.model.set('color', this.value);
        })

        var spanAddonColor = (function () {
            var span = document.createElement('span');
            span.className = 'input-group-addon';
            span.style.padding = '0';

            return span;
        })();
        spanAddonColor.appendChild(txtColor);

        var txtSize = (function () {
            var input = document.createElement('input');
            input.type = 'number';
            input.step = '1';
            input.min = '15';
            input.max = '30';
            input.style.border = '0 none';
            input.style.padding = '0 0 0 4px';
            input.style.margin = '0';
            input.style.width = '41px';
            input.style.height = '26px';
            input.style.lineHeight = '28px';
            input.style.verticalAlign = 'middle';
            input.disabled = self.model instanceof SvgPathModel;

            return input;
        })();
        txtSize.addEventListener('change', function () {
            commandsHistory.add(new SizeElementCommand(self.model, this.value));

            self.model.set('fontSize', this.value);
        })

        var spanAddonSize = (function () {
            var span = document.createElement('span');
            span.className = 'input-group-addon';
            span.style.padding = '0';

            return span;
        })();
        spanAddonSize.appendChild(txtSize);

        // var btnRemove = (function () {
        //     var button = document.createElement('button');
        //     button.type = 'button';
        //     button.className = 'btn btn-default';
        //     button.innerHTML = '<span class="fa fa-trash text-danger" aria-hidden="true"></span>';
        //
        //     return button;
        // })();
        // btnRemove.addEventListener('click', function (e) {
        //     e.preventDefault();
        //     e.stopPropagation();
        //
        //     self.model.destroy();
        // });
        //
        // var spanGroupBtn = (function () {
        //     var span = document.createElement('span');
        //     span.className = 'input-group-btn';
        //
        //     return span;
        // })();
        // spanGroupBtn.appendChild(btnRemove);

        this.el = (function () {
            var div = document.createElement('div');
            div.className = 'input-group input-group-sm';
            div.style.marginBottom = '10px';

            return div;
        })();
        this.el.appendChild(elText);
        this.el.appendChild(elHotspot);
        this.el.appendChild(elChoice);
        this.el.appendChild(spanAddonColor);
        this.el.appendChild(spanAddonSize);
        // this.el.appendChild(spanGroupBtn);

        this.render = function () {
            elChoice.value = this.model.encode();
            elHotspot.value = this.model.encode();
            elText.value = self.model instanceof SvgTextModel ? self.model.get('text') : '——————————';
            txtColor.value = this.model.get('color');
            txtSize.value = this.model.get('fontSize');

            return this;
        }
    };

    /**
     * @constructor
     */
    var ElementsCollection = function () {
        /**
         * @type {SvgElementModel[]}
         */
        this.models = [];
        this.addEvent = null;

        var lastId = 0;

        /**
         * @param {SvgElementModel} pathModel
         */
        this.add = function (pathModel) {
            pathModel.id = ++lastId;

            this.models.push(pathModel);

            if (this.addEvent) {
                this.addEvent(pathModel);
            }
        };
        /**
         * @param {number} index
         * @returns {SvgElementModel}
         */
        this.get = function (index) {
            return this.models[index];
        };
        this.reset = function () {
            this.models.forEach(function (model) {
                model.destroy();
            })

            this.models = [];
        };
        /**
         * @param {ElementsCollection~addEvent} callback
         */
        this.onAdd = function (callback) {
            this.addEvent = callback;
        };
    };

    /**
     * @param {ElementsCollection} elementsCollection
     * @param {Image} image
     * @param {number} questionId
     * @constructor
     */
    var AnnotationCanvasView = function (elementsCollection, image, questionId) {
        var self = this;

        this.questionId = questionId;
        this.image = image;

        var svgImage = (function () {
            var image = document.createElementNS('http://www.w3.org/2000/svg', 'image');
            image.setAttributeNS('http://www.w3.org/1999/xlink', 'href', self.image.src);
            image.setAttribute('width', self.image.width);
            image.setAttribute('height', self.image.height);

            return image;
        })();

        this.el = (function () {
            var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
            svg.setAttribute('version', '1.1');
            svg.setAttribute('viewBox', '0 0 ' + self.image.width + ' ' + self.image.height);
            svg.setAttribute('width', self.image.width);
            svg.setAttribute('height', self.image.height);

            return svg;
        })();
        this.el.appendChild(svgImage);

        this.elementsCollection = elementsCollection;
        this.elementsCollection.onAdd(function (pathModel) {
            var svgElementView = null;

            if (pathModel instanceof SvgPathModel) {
                svgElementView = new SvgPathView(pathModel);
            } else if (pathModel instanceof SvgTextModel) {
                svgElementView = new SvgTextView(pathModel);
            } else {
                return;
            }

            self.el.appendChild(svgElementView.render().el);

            var controllerView = new ControllerView(pathModel);

            $('#annotation-toolbar-' + self.questionId).append(controllerView.render().el);
            $(controllerView.el).children('input').eq(0).focus();
        });

        var $rdbOptions = null;
        var $btnReset = null;
        var $btnUndo = null;
        var $btnRedo = null;

        this.render = function () {
            $rdbOptions = $('[name="' + this.questionId + '-options"]');
            $btnReset = $('#btn-reset-' + this.questionId);
            $btnUndo = $('#btn-undo-' + this.questionId);
            $btnRedo = $('#btn-redo-' + this.questionId);

            setEvents();

            return this;
        };

        function setEvents() {
            var isMoving = false,
                elementModel = null;

            $(self.el)
                .on('dragstart', function (e) {
                    e.preventDefault();
                })
                .on('click', function (e) {
                    e.preventDefault();

                    if ("1" !== $rdbOptions.filter(':checked').val()) {
                        return;
                    }

                    var point = getPointOnImage(self.el, e.clientX, e.clientY);
                    elementModel = new SvgTextModel({x: point.x, y: point.y, text: ''});
                    elementModel.questionId = self.questionId;

                    commandsHistory.add(new AddElementCommand(self.elementsCollection, elementModel));

                    self.elementsCollection.add(elementModel);

                    elementModel = null;
                    isMoving = false;
                })
                .on('mousedown', function (e) {
                    e.preventDefault();

                    var point = getPointOnImage(self.el, e.clientX, e.clientY);
                    if (isMoving || "0" !== $rdbOptions.filter(':checked').val() || elementModel) {
                        return;
                    }

                    elementModel = new SvgPathModel({points: [[point.x, point.y]]});
                    elementModel.questionId = self.questionId;
                    self.elementsCollection.add(elementModel);
                    isMoving = true;
                })
                .on('mousemove', function (e) {
                    e.preventDefault();

                    if (!isMoving || "0" !== $rdbOptions.filter(':checked').val() || !elementModel) {
                        return;
                    }

                    var point = getPointOnImage(self.el, e.clientX, e.clientY);
                    elementModel.addPoint(point.x, point.y);
                })
                .on('mouseup', function (e) {
                    e.preventDefault();

                    if (!isMoving || "0" !== $rdbOptions.filter(':checked').val() || !elementModel) {
                        return;
                    }

                    commandsHistory.add(new AddElementCommand(self.elementsCollection, elementModel));

                    elementModel = null;
                    isMoving = false;
                });

            $btnReset.on('click', function (e) {
                e.preventDefault();

                commandsHistory.add(new ResetCommand(self.elementsCollection));

                self.elementsCollection.reset();
            });

            $btnUndo.on('click', function () {
                commandsHistory.undo();
            });
            $btnRedo.on('click', function () {
                commandsHistory.redo();
            });
        }
    };

    /**
     * @constructor
     * @abstract
     */
    function Command() {}
    /**
     * @abstract
     */
    Command.prototype.before = function () {
        throw new Error('Implement');
    }
    /**
     * @abstract
     */
    Command.prototype.after = function () {
        throw new Error('Implement');
    }

    /**
     * @param {ElementsCollection} collection
     * @param {SvgElementModel} model
     * @constructor
     */
    function AddElementCommand(collection, model) {
        Command.call(this);

        this.collection = collection;
        this.model = model;
    }
    AddElementCommand.prototype = Object.create(Command.prototype);
    AddElementCommand.prototype.after = function () {
        this.collection.add(this.model);
    };
    AddElementCommand.prototype.before = function () {
        this.model.destroy();
    };

    /**
     * @param {SvgElementModel} model
     * @param {string} attribute
     * @param {*} newValue
     * @constructor
     * @abstract
     * @extends Command
     */
    function ElementCommand(model, attribute, newValue) {
        Command.call(this);

        this.model = model;
        this.attribute = attribute;
        this.oldValue = this.model.get(this.attribute);
        this.newValue = newValue;
    }
    ElementCommand.prototype = Object.create(Command.prototype);
    ElementCommand.prototype.after = function () {
        this.model.set(this.attribute, this.newValue);
    };
    ElementCommand.prototype.before = function () {
        this.model.set(this.attribute, this.oldValue);
    };

    /**
     * @param {SvgElementModel} model
     * @param {*} newValue
     * @constructor
     * @extends ElementCommand
     */
    function TextElementCommand(model, newValue) {
        ElementCommand.call(this, model, 'text', newValue);
    }
    TextElementCommand.prototype = Object.create(ElementCommand.prototype);

    /**
     * @param {SvgElementModel} model
     * @param {*} newValue
     * @constructor
     * @extends ElementCommand
     */
    function ColorElementCommand(model, newValue) {
        ElementCommand.call(this, model, 'color', newValue);
    }
    ColorElementCommand.prototype = Object.create(ElementCommand.prototype);

    /**
     * @param {SvgElementModel} model
     * @param {*} newValue
     * @constructor
     * @extends ElementCommand
     */
    function SizeElementCommand(model, newValue) {
        ElementCommand.call(this, model, 'fontSize', newValue);
    }
    SizeElementCommand.prototype = Object.create(ElementCommand.prototype);

    /**
     *
     * @param {ElementsCollection} collection
     * @constructor
     * @extends Command
     */
    function ResetCommand(collection) {
        Command.call(this);

        this.collection = collection;
        this.oldModels = collection.models;
    }
    ResetCommand.prototype = Object.create(Command.prototype);
    ResetCommand.prototype.after = function () {
        this.collection.reset();
    };
    ResetCommand.prototype.before = function () {
        var self = this;

        this.oldModels.forEach(function (model) {
            self.collection.add(model);
        });
    };

    function CommandHistory() {
        var index = -1;
        /**
         * @type {Command[]}
         */
        var commands = [];

        /**
         * @param {Command} command
         */
        this.add = function (command) {
            if (index > -1) {
                commands = commands.slice(0, index + 1);
            } else {
                commands = [];
            }

            commands.push(command);
            ++index;
        }
        this.undo = function () {
            (commands, index);
            if (-1 === index) {
                return;
            }

            var command = commands[index];
            command.before();

            --index;
        };
        this.redo = function () {
            if (index + 1 === commands.length) {
                return;
            }

            ++index;

            var command = commands[index];
            command.after();
        };
    };

    var commandsHistory = new CommandHistory();

    window.AnnotationQuestion = function (userSettings) {
        $(function () {
            var settings = $.extend(
                    {
                        questionId: 0,
                        exerciseId: 0,
                        relPath: '/'
                    },
                    userSettings
                ),
                xhrUrl = 'exercise/annotation_user.php?' + _p.web_cid_query,
                $container = $('#annotation-canvas-' + settings.questionId);

            $
                .getJSON(settings.relPath + xhrUrl, {
                    question_id: parseInt(settings.questionId),
                    exe_id: parseInt(settings.exerciseId),
                    course_id: parseInt(settings.courseId)
                })
                .done(function (questionInfo) {
                    var image = new Image();
                    image.onload = function () {
                        var elementsCollection = new ElementsCollection(),
                            canvas = new AnnotationCanvasView(elementsCollection, this, parseInt(settings.questionId));

                        $container.html(canvas.render().el);

                        /** @namespace questionInfo.answers.paths */
                        $.each(questionInfo.answers.paths, function (i, pathInfo) {
                            var pathModel = SvgPathModel.decode(pathInfo);
                            pathModel.questionId = settings.questionId;
                            elementsCollection.add(pathModel);
                        });

                        /** @namespace questionInfo.answers.texts */
                        $(questionInfo.answers.texts).each(function (i, textInfo) {
                            var textModel = SvgTextModel.decode(textInfo);
                            textModel.questionId = settings.questionId;
                            elementsCollection.add(textModel);
                        });
                    };
                    image.src = questionInfo.image.path;
                });
        });
    };
})(window, window.jQuery);