'use strict';
/* globals $, fabric */

var config = require('./config');

/**
 * Creates a text-button with text/settings provided.
 * @param {string} id
 * @param {string} text - text to be shown inside the button
 * @param {Object} settings
 * @param {bool} isActive
 */
function TextButton(id, text, settings, isActive) {
  /* jshint unused:false */

  fabric.Group.call(this);

  this.__active = isActive || false;
  var _callback = null;
  var _rect = null;
  var _text = null;
  var _id = id;
  var width = settings.rect ? settings.rect.width : 0;
  var height = settings.rect ? settings.rect.height : 0;

  var _rectSettings = $.extend({}, config.textButton.rect(width, height), settings.rect);
  var _textSettings = $.extend({}, config.textButton.text, settings.text, {
    text: Array.isArray(text) ? text[0] : text,
    textActive: Array.isArray(text) ? text[1] : text,
  });

  this.selectable = true;

  // Make sure we're interactive
  this.disabled = false;
  this.hoverCursor = config.textButton.cursor;

  // Initialize text and rectangle
  _text = new fabric.Text('', _textSettings);
  _rect = new fabric.Rect(_rectSettings);

  this.addWithUpdate(_rect).addWithUpdate(_text);

  /**
     * @param  {String} text
     * @return {TextButton}
     */
  this.setText = function(text) {
    _text.setText((text || '').toString()).setCoords();

    if (_rectSettings.dynamicW) {
      this.width = _rect.width = _text.width + config.textButton.padding;
    }

    if (_rectSettings.dynamicH) {
      this.height = _rect.height = _text.height + config.textButton.padding;
    }

    return this.setCoords();
  };

  this.getId = function() {
    return _id;
  };

  /**
     * @return {Boolean}
     */
  this.isActive = function() {
    return this.__active;
  };

  function toggleActiveStyle() {
    /*jshint validthis: true */
    _rect.setFill(_rectSettings[this.isActive() ? 'activeFill' : 'fill']);
    _text.setFill(_textSettings[this.isActive() ? 'activeFill' : 'fill']);
    this.setText(_textSettings[this.isActive() ? 'textActive' : 'text']);
  }

  function handleMouseDown(e) {
    /*jshint validthis: true */
    toggleActiveStyle.call(this);
    _callback.call(this, e);

    if (this.__group) {
      this.__group.render();
    }
  }

  this.onClick = function(callback) {
    _callback = callback || function() {};
    this.on('mousedown', function (e) {
      // As inactive buttons are still clickable, we first check if the button is disabled.
      // Only then we should do stuff.
      if (!this.disabled) {
        this.__active = !this.__active;
        handleMouseDown.call(this, e);
      }
    }.bind(this));
    return this;
  };

  this.setActive = function (isActive) {
    this.__active = typeof isActive === 'undefined' ? true : !!isActive;
    toggleActiveStyle.call(this);
  };

  this.setDisabled = function (isDisabled)
  {
    this.disabled = isDisabled;

    _rect.setFill(_rectSettings[this.disabled ? 'disabledFill' : 'fill']);
    _text.setFill(_textSettings[this.disabled ? 'disabledFill' : 'fill']);

    this.hoverCursor = this.disabled ? config.textButton.disabledCursor : config.textButton.cursor;
  };

  if (_textSettings.text) {
    this.setText(_textSettings.text);
  }
}

TextButton.prototype = Object.create(fabric.Group.prototype);
TextButton.prototype.constructor = TextButton;

module.exports = TextButton;