.item {
  background-color: darkgray;
  color: #fff;
  padding: 5px;
  margin-bottom: 32px;
  display: inline-block;
}
.item.active {
  background-color: darkred;
}
.panel:not(.show) {
  display: none;
}

const $tabs = (target) => {
  let tabItem = "js-tab__item",
    tabItemActive = "active",
    tabPanelShow = "show",
    _elemTabs =
      typeof target === "string" ? document.querySelector(target) : target,
    _eventTabsShow;

  const _showTab = function (tabsLinkTarget) {
    let tabsPaneTarget, tabsLinkActive, tabsPaneShow;

    tabsPaneTarget = document.querySelector(
      `.js-tab__panel[data-tab-panel="${tabsLinkTarget.dataset.tabItem}"]`
    );
    tabsLinkActive = tabsLinkTarget.parentElement.querySelector(
      "." + tabItemActive
    );
    tabsPaneShow = tabsPaneTarget.parentElement.querySelector(
      "." + tabPanelShow
    );
    // если следующая вкладка равна активной, то завершаем работу
    if (tabsLinkTarget === tabsLinkActive) {
      return;
    }
    // удаляем классы у текущих активных элементов
    if (tabsLinkActive !== null) {
      tabsLinkActive.classList.remove(tabItemActive);
    }
    if (tabsPaneShow !== null) {
      tabsPaneShow.classList.remove(tabPanelShow);
    }
    // добавляем классы к элементам (в зависимости от выбранной вкладки)
    tabsLinkTarget.classList.add(tabItemActive);
    tabsPaneTarget.classList.add(tabPanelShow);
    document.dispatchEvent(_eventTabsShow);
  };

  const _switchTabTo = function (tabsLinkIndex) {
    let tabsLinks = _elemTabs.querySelectorAll("." + tabItem);
    if (tabsLinks.length >= 0) {
      if (tabsLinkIndex > tabsLinks.length) {
        tabsLinkIndex = tabsLinks.length;
      }
      _showTab(tabsLinks[tabsLinkIndex]);
    }
  };

  _eventTabsShow = new CustomEvent("tab.show", { detail: _elemTabs });

  if (_elemTabs) {
    _elemTabs.addEventListener("click", function (e) {
      let tabsLinkTarget = e.target;
      // завершаем выполнение функции, если кликнули не по ссылке
      if (!tabsLinkTarget.classList.contains(tabItem)) {
        return;
      }
      _showTab(tabsLinkTarget);
    });
  }

  return {
    showTab: function (target) {
      _showTab(target);
    },
    /* программно переключиться на 2 вкладку (2 – номер вкладки, на которую нужно перейти)
    const tabCollection = $tabs('.tabs');
    tabCollection.switchTabTo(2);
    */
    switchTabTo: function (index) {
      _switchTabTo(index);
    }
  };
};

// Инициализация ТАБов
$tabs(".js-tab__init");