/*!
 * Table dialog plugin for Editor.md
 *
 * @file        table-dialog.js
 * @author      pandao
 * @version     1.2.1
 * @updateTime  2015-06-09
 * {@link       https://github.com/pandao/editor.md}
 * @license     MIT
 */

(function() {
  var factory = function (exports) {
    var $ = jQuery
    var pluginName = 'table-dialog'

    var langs = {
      'zh-cn': {
        toolbar: {
          table: '表格'
        },
        dialog: {
          table: {
            title: '添加表格',
            cellsLabel: '单元格数',
            alignLabel: '对齐方式',
            rows: '行数',
            cols: '列数',
            aligns: ['默认', '左对齐', '居中对齐', '右对齐']
          }
        }
      },
      'zh-tw': {
        toolbar: {
          table: '添加表格'
        },
        dialog: {
          table: {
            title: '添加表格',
            cellsLabel: '單元格數',
            alignLabel: '對齊方式',
            rows: '行數',
            cols: '列數',
            aligns: ['默認', '左對齊', '居中對齊', '右對齊']
          }
        }
      },
      'en': {
        toolbar: {
          table: 'Tables'
        },
        dialog: {
          table: {
            title: 'Tables',
            cellsLabel: 'Cells',
            alignLabel: 'Align',
            rows: 'Rows',
            cols: 'Cols',
            aligns: ['Default', 'Left align', 'Center align', 'Right align']
          }
        }
      }
    }

    exports.fn.tableDialog = function() {
      // var _this = this
      var cm = this.cm
      var editor = this.editor
      var settings = this.settings
      // var path = settings.path + '../plugins/' + pluginName + '/'
      var classPrefix = this.classPrefix
      var dialogName = classPrefix + pluginName
      var dialog

      $.extend(true, this.lang, langs[this.lang.name])
      this.setToolbar()

      var lang = this.lang
      var dialogLang = lang.dialog.table

      var dialogContent = [
        '<div class="editormd-form" style="padding: 13px 0;">',
        '<label>' + dialogLang.cellsLabel + '</label>',
        dialogLang.rows + ' <input type="number" value="3" class="number-input" style="width:40px;" max="100" min="2" data-rows />&nbsp;&nbsp;',
        dialogLang.cols + ' <input type="number" value="2" class="number-input" style="width:40px;" max="100" min="1" data-cols /><br/>',
        '<label>' + dialogLang.alignLabel + '</label>',
        '<div class="fa-btns"></div>',
        '</div>'
      ].join('\n')

      if (editor.find('.' + dialogName).length > 0) {
        dialog = editor.find('.' + dialogName)

        this.dialogShowMask(dialog)
        this.dialogLockScreen()
        dialog.show()
      } else {
        dialog = this.createDialog({
          name: dialogName,
          title: dialogLang.title,
          width: 360,
          height: 260,
          mask: settings.dialogShowMask,
          drag: settings.dialogDraggable,
          content: dialogContent,
          lockScreen: settings.dialogLockScreen,
          maskStyle: {
            opacity: settings.dialogMaskOpacity,
            backgroundColor: settings.dialogMaskBgColor
          },
          buttons: {
            enter: [lang.buttons.enter, function() {
              console.log('enter...')
              var rows = parseInt(this.find('[data-rows]').val())
              var cols = parseInt(this.find('[data-cols]').val())
              var align = this.find('[name="table-align"]:checked').val()
              var table = ''
              var hrLine = '------------'

              var alignSign = {
                _default: hrLine,
                left: ':' + hrLine,
                center: ':' + hrLine + ':',
                right: hrLine + ':'
              }

              if (rows > 1 && cols > 0) {
                for (var r = 0, len = rows; r < len; r++) {
                  var row = []
                  var head = []

                  for (var c = 0, len2 = cols; c < len2; c++) {
                    if (r === 1) {
                      head.push(alignSign[align])
                    }

                    var content = r === 0 ? 'header ' + (c + 1) : 'row ' + r + ' col ' + (c + 1) // 预设数据
                    row.push(content)
                  }

                  if (r === 1) {
                    table += '| ' + head.join(' | ') + ' |' + '\n'
                  }

                  table += '| ' + row.join((cols === 1) ? '' : ' | ') + ' |' + '\n'
                }
              }

              cm.replaceSelection(table)

              this.hide().lockScreen(false).hideMask()

              return false
            }],

            cancel: [lang.buttons.cancel, function() {
              this.hide().lockScreen(false).hideMask()

              return false
            }]
          }
        })
      }

      var faBtns = dialog.find('.fa-btns')

      if (faBtns.html() === '') {
        var icons = ['align-justify', 'align-left', 'align-center', 'align-right']
        var _lang = dialogLang.aligns
        var values = ['_default', 'left', 'center', 'right']

        for (var i = 0, len = icons.length; i < len; i++) {
          var checked = (i === 0) ? ' checked="checked"' : ''
          var btn = '<a href="javascript:;"><label for="editormd-table-dialog-radio' + i + '" title="' + _lang[i] + '">'
          btn += '<input type="radio" name="table-align" id="editormd-table-dialog-radio' + i + '" value="' + values[i] + '"' + checked + ' />&nbsp;'
          btn += '<i class="fa fa-' + icons[i] + '"></i>'
          btn += '</label></a>'

          faBtns.append(btn)
        }
      }
    }
  }

  // CommonJS/Node.js
  if (typeof require === 'function' && typeof exports === 'object' && typeof module === 'object') {
    module.exports = factory
  } else if (typeof define === 'function') // AMD/CMD/Sea.js
  {
    if (define.amd) { // for Require.js
      define(['editormd'], function(editormd) {
        factory(editormd)
      })
    } else { // for Sea.js
      define(function(require) {
        var editormd = require('./../../editormd')
        factory(editormd)
      })
    }
  } else {
    factory(window.editormd)
  }
})()
