(function () {
  'use strict';

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

  function html(id, tabs, panels, activeId) {
    activeId = activeId || (tabs[0] && tabs[0].id);
    var nav = tabs.map(function (t) {
      var cls = t.id === activeId ? ' soon-admin-tabs__tab is-active' : ' soon-admin-tabs__tab';
      return '<button type="button" class="' + cls.trim() + '" data-tab="' + I().esc(t.id) + '">' +
        I().esc(t.label) + '</button>';
    }).join('');
    var body = tabs.map(function (t) {
      var vis = t.id === activeId ? ' is-active' : '';
      return '<div class="soon-admin-tabs__panel' + vis + '" data-panel="' + I().esc(t.id) + '">' +
        (panels[t.id] || '') + '</div>';
    }).join('');
    return '<div class="soon-admin-tabs" id="' + I().esc(id) + '">' +
      '<nav class="soon-admin-tabs__nav" role="tablist">' + nav + '</nav>' +
      '<div class="soon-admin-tabs__body">' + body + '</div></div>';
  }

  function bind(root, onChange) {
    if (!root) return;
    root.querySelectorAll('.soon-admin-tabs__tab').forEach(function (btn) {
      btn.onclick = function () {
        var tabId = btn.dataset.tab;
        root.querySelectorAll('.soon-admin-tabs__tab').forEach(function (b) {
          b.classList.toggle('is-active', b.dataset.tab === tabId);
        });
        root.querySelectorAll('.soon-admin-tabs__panel').forEach(function (p) {
          p.classList.toggle('is-active', p.dataset.panel === tabId);
        });
        if (typeof onChange === 'function') onChange(tabId);
      };
    });
  }

  window.AdminTabs = { html: html, bind: bind };
})();