(function ($R) {
  $R.add('plugin', 'properties', {
    modals: {
      properties:
        '<form action=""> \
                    <div class="form-item"> \
                        <label>Id</label> \
                        <input type="text" name="id"> \
                    </div> \
                    <div class="form-item"> \
                        <label>Class</label> \
                        <input type="text" name="classname"> \
                    </div> \
                </form>',
    },
    translations: {
      en: {
        properties: 'Properties',
      },
    },
    init: function (app) {
      this.app = app;
      this.opts = app.opts;
      this.lang = app.lang;
      this.$body = app.$body;
      this.toolbar = app.toolbar;
      this.inspector = app.inspector;
      this.selection = app.selection;

      // local
      this.labelStyle = {
        'font-family': 'monospace',
        position: 'absolute',
        padding: '2px 5px',
        'line-height': 1,
        'border-radius': '3px',
        'font-size': '11px',
        color: 'rgba(255, 255, 255, .9)',
      };
    },
    // messages
    onmodal: {
      properties: {
        open: function ($modal, $form) {
          if (this.$block) {
            var blockData = this._getData(this.$block);
            $form.setData(blockData);
          }
        },
        opened: function ($modal, $form) {
          $form.getField('id').focus();
        },
        save: function ($modal, $form) {
          var data = $form.getData();
          this._save(data);
        },
      },
    },
    onbutton: {
      properties: {
        observe: function (button) {
          this._observeButton(button);
        },
      },
    },
    onclick: function () {
      //this._observeButton();
    },

    // public
    start: function () {
      var data = {
        title: this.lang.get('properties'),
        api: 'plugin.properties.open',
        observe: 'properties',
      };

      var $button = this.toolbar.addButton('properties', data);
      $button.setIcon('<i class="re-icon-properties"></i>');

      this._createLabel();
    },
    stop: function () {
      this._removeLabel();
    },
    open: function () {
      var block = this.selection.getBlock();
      if (!block) return;

      this.$block = $R.dom(block);

      var options = {
        title: this.lang.get('properties'),
        width: '500px',
        name: 'properties',
        handle: 'save',
        commands: {
          save: {title: this.lang.get('save')},
          cancel: {title: this.lang.get('cancel')},
        },
      };

      this.app.api('module.modal.build', options);
    },

    // private
    _save: function (data) {
      this.app.api('module.modal.close');

      if (data.id === '') this.$block.removeAttr('id');
      else this.$block.attr('id', data.id);

      if (data.classname === '') this.$block.removeAttr('class');
      else this.$block.attr('class', data.classname);
    },
    _getData: function (block) {
      var $block = $R.dom(block);
      var data = {
        id: $block.attr('id'),
        classname: $block.attr('class'),
      };

      return data;
    },
    _showData: function (block, data) {
      var str = '';
      if (data.id) str += '#' + data.id + ' ';
      if (data.classname) str += '.' + data.classname;

      if (str !== '') {
        var $block = $R.dom(block);
        var pos = $block.offset();

        this.$label.css({
          top: pos.top - 12 + 'px',
          left: pos.left + 'px',
          'z-index': this.opts.zindex ? this.opts.zindex + 3 : 'auto',
        });
        this.$label.html(str);
        this.$label.show();
      } else {
        this.$label.hide();
      }
    },
    _createLabel: function () {
      this.$label = $R.dom('<span />');
      this.$label.hide();
      this.$label
        .css(this.labelStyle)
        .css('background', 'rgba(229, 57, 143, .7)');

      this.$body.append(this.$label);
    },
    _removeLabel: function () {
      if (this.$label) this.$label.remove();
    },
    _observeButton: function (button) {
      var block = this.selection.getBlock();
      var data = this.inspector.parse(block);

      if (block && !data.isComponent()) {
        var blockData = this._getData(block);

        this._showData(block, blockData);
        button.enable();
      } else {
        button.disable();
        if (this.$label) this.$label.hide();
      }
    },
  });
})(Redactor);
