(function () {
  'use strict';

  var I = function () { return window.AdminI18n; };

  function field(label, inner, hint) {
    var html = '<div class="soon-form-field"><label class="soon-form-label">' + I().esc(label) + '</label>' + inner;
    if (hint) {
      html += '<p class="soon-admin-form-hint">' + I().esc(hint) + '</p>';
    }
    return html + '</div>';
  }

  function input(id, opts) {
    opts = opts || {};
    var type = opts.type || 'text';
    var cls = 'soon-input soon-input--sm' + (opts.className ? ' ' + opts.className : '');
    var attrs = 'id="' + id + '" class="' + cls + '"';
    if (opts.value != null) attrs += ' value="' + I().esc(opts.value) + '"';
    if (opts.placeholder) attrs += ' placeholder="' + I().esc(opts.placeholder) + '"';
    if (opts.disabled) attrs += ' disabled';
    if (opts.autocomplete) attrs += ' autocomplete="' + I().esc(opts.autocomplete) + '"';
    if (type === 'textarea') {
      return '<textarea ' + attrs.replace('value="' + I().esc(opts.value) + '"', '') + ' rows="' + (opts.rows || 4) + '">' +
        I().esc(opts.value || '') + '</textarea>';
    }
    return '<input type="' + type + '" ' + attrs + '>';
  }

  function select(id, optionsHtml) {
    return '<select id="' + id + '" class="soon-input soon-input--sm">' + optionsHtml + '</select>';
  }

  function actions(primaryLabel, primaryId, secondaryHtml) {
    return '<div class="soon-admin-form__actions">' +
      (secondaryHtml || '') +
      '<button type="button" class="soon-btn soon-btn--sm" id="' + (primaryId || 'adminFormSave') + '">' +
      I().esc(primaryLabel || '保存') + '</button></div>';
  }

  function panel(title, bodyHtml) {
    return '<div class="soon-admin-form-panel"><h3 class="soon-admin-form-panel__title">' + I().esc(title) +
      '</h3><div class="soon-admin-form-panel__body">' + bodyHtml + '</div></div>';
  }

  window.AdminForm = {
    field: field,
    input: input,
    select: select,
    actions: actions,
    panel: panel,
  };
})();