'use strict';

var Canvas = require('./Canvas');
var util = require('./util');

function ImageEditor(canvasId, args) {
    var _canvas;

    var _settings = $.extend({
        // Type defaults to wallpaper
        type: 'wallpaper',
        // Default texts on the buttons
        buttons: {
            flat: 'Flat',
            threeD: '3d',
            showMurals: 'Show Murals Panel',
            hideMurals: 'Hide Murals Panel',
            showRulers: 'Show Ruler',
            hideRulers: 'Hide Ruler',
            showFullscreen: 'Fullscreen',
            hideFullscreen: 'Exit Fullscreen',
        }
    }, args);

    // Initialize canvas
    _canvas = new Canvas(canvasId);

    // Let Canvas know which type it is, canvas or wallpaper since it is
    // accessible for all objects contained within.
    _canvas.set({
        __type: _settings.type
    });

    // Adding buttons to the canvas depending on which type is active.
    // It might be better that this resides somewhere else, either in Canvas or
    // during the initialization of the image editor.
    if (_canvas.__type === 'canvas') {
        _canvas.getButtonMenu()
            .addItem('flat', _settings.buttons.flat, function () {
                _canvas.toggle3D(false);
            }, true)
            .addItem('3d', _settings.buttons.threeD, function () {
                _canvas.toggle3D(true);
            })
            .render();
    } else {
        _canvas.getButtonMenu()
            .addItem('toggleMurals', [_settings.buttons.showMurals, _settings.buttons.hideMurals], function () {
                _canvas.getViewport().getGores().enable(this.isActive());
            })
            .addItem('toggleRulers', [_settings.buttons.showRulers, _settings.buttons.hideRulers], function () {
                _canvas.getViewport().getRulers().enable(this.isActive());
            })
            .addItem('toggleFullscreen', [_settings.buttons.showFullscreen, _settings.buttons.hideFullscreen], function () {
                util.toggleFullscreen(_canvas.getSelectionElement().parentNode);
            })
            .render();
    }

    // Binding fullscreen change event to the image-editor wrapper. This way we can set the correct button active.
    $(_canvas.getSelectionElement().parentNode).bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) {
        var isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;

        if (isFullscreen) {
            return;
        }

        _canvas.getButtonMenu().getItems().forEach(function(button) {
            if (button.getId() === 'toggleFullscreen') {
                button.setActive(false);
            }
        });
    });

    /**
     * Crops image to desired dimensions
     * @param  {int} width  [description]
     * @param  {int} height [description]
     * @param  {string} units cm|inch
     * @return {ImageEditor}
     */
    this.crop = function (width, height, units) {
        _canvas.getImage().__cropped = false;
        _canvas.getImageData().removeCropData();
        _canvas.getViewport().set(width, height, units);
        return this;
    };

    /**
     * @param  {string|object} key
     * @param  {object} defaultValue
     * @return {object}
     */
    this.get = function (key, defaultValue) {
        var value = _settings[key];
        return typeof value === 'undefined' ? defaultValue : value;
    };

    /**
     * Loads the image into the canvas.
     * @param  {Number|String} url
     * @param  {Function} callback
     * @return {ImageEditor}
     */
    this.loadImage = function (url, callback) {
        callback = typeof callback === 'function' ? callback : function () {};
        fabric.Image.fromURL(this._url = url, function (img) {
            _canvas.setImage(img);
            img.__url = url;
            img.sendToBack();
            callback(img);
        });
        return this;
    };

    /**
     * @param  {string|object} key
     * @param  {object} value
     * @return {ImageEditor}
     */
    this.set = function (key, value) {
        $.extend(_settings, util.assertKeyValuePair(key, value));
        return this;
    };

    util.setProperties(this, {
        canvas: {
            get: function () {
                return _canvas;
            }
        }
    });
}

module.exports = ImageEditor;