(function () {
  "use strict";

  var TAB_ORDER = ["direct-connect", "server-browser", "local", "favorites", "recent"];

  window.CO_Tabs = {
    TAB_ORDER: TAB_ORDER,

    render: function (root, state) {
      var navEl = root.querySelector(".co-nav-list");
      if (!navEl) return;

      var labels = {
        "direct-connect": "Direct Connect",
        "server-browser": "Browse",
        local: "Local",
        favorites: "Favorites",
        recent: "Recent"
      };

      navEl.innerHTML = TAB_ORDER.map(function (tabId, index) {
        var active = state.activeTab === tabId ? " active" : "";
        var focused = state.focusZone === "tabs" && state.selectedTabIndex === index ? " focused" : "";
        return (
          '<button type="button" class="co-nav-item' + active + focused + '" data-tab="' + tabId + '" data-index="' + index + '">' +
          labels[tabId] +
          "</button>"
        );
      }).join("");

      navEl.className = "co-nav-list" + (state.focusZone === "tabs" ? " focused" : "");
    },

    bind: function (root, onTabClick) {
      var navEl = root.querySelector(".co-nav-list");
      if (!navEl) return;

      navEl.addEventListener("click", function (e) {
        var btn = e.target.closest(".co-nav-item");
        if (!btn) return;
        onTabClick(btn.getAttribute("data-tab"));
      });
    }
  };
})();