//= require rails_admin/custom/ckeditor_ajax

(function($) {
  function nearestField($input) {
    return $input.closest('.form-group, .control-group');
  }

  function buildProductLocaleTabs() {
    var $form = $('form').filter(function() {
      return $(this).find('[name="product[name]"]').length > 0;
    }).first();
    if ($form.length === 0) {
      return;
    }

    var fieldMap = [
      {
        key: 'zh-CN',
        label: '简体中文',
        nameField: nearestField($form.find('[name="product[name]"]')),
        detailField: nearestField($form.find('[name="product[detail]"]'))
      },
      {
        key: 'en',
        label: 'English',
        nameField: nearestField($form.find('[name="product[name_en]"]')),
        detailField: nearestField($form.find('[name="product[detail_en]"]'))
      },
      {
        key: 'ru',
        label: 'Русский',
        nameField: nearestField($form.find('[name="product[name_ru]"]')),
        detailField: nearestField($form.find('[name="product[detail_ru]"]'))
      },
      {
        key: 'zh-TW',
        label: '繁體中文',
        nameField: nearestField($form.find('[name="product[name_tw]"]')),
        detailField: nearestField($form.find('[name="product[detail_tw]"]'))
      }
    ];

    if ($form.find('.product-locale-tabs').length > 0) {
      return;
    }

    var hasAllFields = true;
    $.each(fieldMap, function(_, group) {
      if (group.nameField.length === 0 || group.detailField.length === 0) {
        hasAllFields = false;
        return false;
      }
    });
    if (!hasAllFields) {
      return;
    }

    var $anchor = fieldMap[0].nameField;
    var $mount = $('<div class="product-locale-tabs-mount"></div>');
    $anchor.before($mount);
    var $tabs = $('<div class="product-locale-tabs"></div>');
    var $header = $('<div class="product-locale-tabs-header"><div><h4>商品多语言内容</h4><p>名称与详情按语言分别维护，未填写时接口默认回退到简体中文。</p></div></div>');
    var $nav = $('<ul class="nav nav-tabs product-locale-tabs-nav" role="tablist"></ul>');
    var $content = $('<div class="tab-content product-locale-tabs-content"></div>');

    $.each(fieldMap, function(index, group) {
      var tabId = 'product-locale-tab-' + group.key.replace(/[^a-zA-Z0-9]/g, '-').toLowerCase();
      var activeClass = index === 0 ? 'active' : '';
      var $navItem = $('<li role="presentation" class="' + activeClass + '"></li>');
      var $link = $('<a data-toggle="tab" role="tab"></a>');
      $link.attr('href', '#' + tabId);
      $link.append($('<span class="product-locale-tab-title"></span>').text(group.label));
      $link.append($('<span class="product-locale-tab-code"></span>').text(group.key));
      $navItem.append($link);
      $nav.append($navItem);

      var $pane = $('<div role="tabpanel" class="tab-pane product-locale-pane ' + activeClass + '" id="' + tabId + '"></div>');
      $pane.append(group.nameField);
      $pane.append(group.detailField);
      $content.append($pane);
    });

    $tabs.append($header).append($nav).append($content);
    $mount.replaceWith($tabs);
  }

  $(document).on('ready page:load turbolinks:load', buildProductLocaleTabs);
})(jQuery);