/******/ (() => { // webpackBootstrap
/*!*********************!*\
  !*** ./src/view.js ***!
  \*********************/
function initTabs() {
  const tabsContainers = document.querySelectorAll(".tabs-with-image");
  if (!tabsContainers) return;
  tabsContainers.forEach(tabContainer => {
    const tabsList = tabContainer.querySelector(".tabs-with-image__tabs-list");
    const tabsListItems = tabsList.querySelectorAll(".tabs-with-image__tabs-item");
    const tabPanels = tabContainer.querySelectorAll(".tabs-with-image__panel-content-wrapper");

    // Initially hide all tab panels except the first one
    tabPanels.forEach((tabPanel, index) => {
      if (index === 0) {
        tabPanel.removeAttribute("hidden");
        tabsListItems[index].querySelector(".tabs-with-image__tabs-link").setAttribute("aria-selected", "true");
        tabsListItems[index].querySelector(".tabs-with-image__tabs-link").setAttribute("tabindex", "0");
      } else {
        tabPanel.setAttribute("hidden", true);
        tabsListItems[index].querySelector(".tabs-with-image__tabs-link").setAttribute("aria-selected", "false");
        tabsListItems[index].querySelector(".tabs-with-image__tabs-link").setAttribute("tabindex", "-1");
      }
    });

    // Handle click on tab to switch tabs
    tabContainer.addEventListener("click", e => {
      const clickedTabContainer = e.target.closest(".tabs-with-image__tabs-item");
      if (!clickedTabContainer) return;
      e.preventDefault();
      const clickedTabLink = clickedTabContainer.querySelector(".tabs-with-image__tabs-link");
      switchTab(clickedTabLink);
    });

    // Handle keyboard navigation
    tabContainer.addEventListener("keydown", e => {
      switch (e.key) {
        case "ArrowLeft":
          moveLeft();
          break;
        case "ArrowRight":
          moveRight();
          break;
        case "Home":
          e.preventDefault();
          switchTab(tabsListItems[0].querySelector(".tabs-with-image__tabs-link"));
          break;
        case "End":
          e.preventDefault();
          switchTab(tabsListItems[tabsListItems.length - 1].querySelector(".tabs-with-image__tabs-link"));
          break;
      }
    });
    function moveLeft() {
      const currentTabLink = document.activeElement;
      const currentTab = currentTabLink.closest(".tabs-with-image__tabs-item");
      if (!currentTab.previousElementSibling) {
        switchTab(tabsListItems[tabsListItems.length - 1].querySelector("a"));
      } else {
        switchTab(currentTab.previousElementSibling.querySelector("a"));
      }
    }
    function moveRight() {
      const currentTabLink = document.activeElement;
      const currentTab = currentTabLink.closest(".tabs-with-image__tabs-item");
      if (!currentTab.nextElementSibling) {
        switchTab(tabsListItems[0].querySelector("a"));
      } else {
        switchTab(currentTab.nextElementSibling.querySelector("a"));
      }
    }
    function switchTab(newTab) {
      const activePanelId = newTab.getAttribute("href");
      const activePanel = tabContainer.querySelector(activePanelId);
      if (!activePanel) {
        console.error("No panel matches the ID:", activePanelId);
        // Exit the function if no panel is found
        return;
      }
      tabsListItems.forEach(container => {
        const link = container.querySelector(".tabs-with-image__tabs-link");
        link.setAttribute("aria-selected", "false");
        link.setAttribute("tabindex", "-1");
      });
      tabPanels.forEach(panel => {
        panel.setAttribute("hidden", true);
      });
      activePanel.removeAttribute("hidden");
      newTab.setAttribute("aria-selected", "true");
      newTab.setAttribute("tabindex", "0");
      newTab.focus();
    }

    // Initialise inner tabs and accordion within this tabs container
    initInnerTabs(tabContainer);
    initAccordion(tabContainer);

    // Add mouse dragging functionality for desktop on tabs list
    let isDown = false;
    let startX;
    let scrollLeft;
    tabsList.addEventListener("mousedown", e => {
      isDown = true;
      tabsList.classList.add("active");
      startX = e.pageX - tabsList.offsetLeft;
      scrollLeft = tabsList.scrollLeft;
    });
    tabsList.addEventListener("mouseleave", () => {
      isDown = false;
      tabsList.classList.remove("active");
    });
    tabsList.addEventListener("mouseup", () => {
      isDown = false;
      tabsList.classList.remove("active");
    });
    tabsList.addEventListener("mousemove", e => {
      // stop the function from running if not mousedown
      if (!isDown) return;
      e.preventDefault();
      const x = e.pageX - tabsList.offsetLeft;
      //scroll-fast
      const walk = (x - startX) * 2;
      tabsList.scrollLeft = scrollLeft - walk;
    });
  });
}
function initInnerTabs(tabsContainer) {
  const innerTabsSections = tabsContainer.querySelectorAll(".tabs-with-image__panel-posts-section");
  if (!innerTabsSections) return;
  innerTabsSections.forEach(section => {
    const innerTabBtns = section.querySelectorAll(".tabs-with-image__inner-tabs-button");
    const allPosts = section.querySelectorAll(".tabs-with-image__post-wrapper");
    innerTabBtns.forEach((button, index) => {
      if (index === 0) {
        button.setAttribute("aria-active", "true");
      } else {
        button.setAttribute("aria-active", "false");
      }
      button.addEventListener("click", showClickedTabContent);
    });
    allPosts.forEach((post, index) => {
      if (index === 0) {
        post.setAttribute("aria-active", "true");
      } else {
        post.setAttribute("aria-active", "false");
        post.classList.add("position--absolute");
      }
    });
  });
  function showClickedTabContent(e) {
    const button = e.target;
    const buttonId = e.target.dataset.postId;
    const relatedPost = tabsContainer.querySelector(buttonId);
    toggleRelatedPost(button, relatedPost);
  }
  function toggleRelatedPost(button, relatedPost) {
    const postSection = button.closest(".tabs-with-image__panel-posts-section");
    const postsWrapper = postSection.querySelector(".tabs-with-image__inner-panel-post-content");
    const allPosts = postsWrapper.querySelectorAll(".tabs-with-image__post-wrapper");
    const innerTabBtns = postSection.querySelectorAll(".tabs-with-image__inner-tabs-button");

    // Set aria-active to false for all buttons and posts
    innerTabBtns.forEach(btn => btn.setAttribute("aria-active", "false"));
    allPosts.forEach(post => post.setAttribute("aria-active", "false"));

    // Set aria-active to true for the clicked button and related post
    button.setAttribute("aria-active", "true");
    relatedPost.setAttribute("aria-active", "true");
  }
}
function initAccordion(tabsContainer) {
  const accordions = tabsContainer.querySelectorAll(".tabs__accordion");
  if (!accordions) return;
  accordions.forEach(accordion => {
    // const panels = accordion.querySelectorAll(".tabs__accordion-panel");

    // if (panels.length > 0) {
    //   openPanel(panels[0]);
    // }

    accordion.addEventListener("click", e => {
      const btn = e.target.closest(".tabs__accordion-trigger");
      if (!btn) return;
      const panelToActivate = btn.closest(".tabs__accordion-panel");
      toggleAccordion(panelToActivate);
    });
  });
}
function toggleAccordion(panel) {
  const btn = panel.querySelector(".tabs__accordion-trigger");
  const isOpen = btn.getAttribute("aria-expanded") === "true";
  if (isOpen) {
    closePanel(panel);
  } else {
    openPanel(panel);
  }
}
function openPanel(panel) {
  const btn = panel.querySelector(".tabs__accordion-trigger");
  const content = panel.querySelector(".tabs__accordion-content");
  btn.setAttribute("aria-expanded", "true");
  content.setAttribute("aria-hidden", "false");
}
function closePanel(panel) {
  const btn = panel.querySelector(".tabs__accordion-trigger");
  const content = panel.querySelector(".tabs__accordion-content");
  btn.setAttribute("aria-expanded", "false");
  content.setAttribute("aria-hidden", "true");
}
document.addEventListener("DOMContentLoaded", () => {
  initTabs();
});
/******/ })()
;
//# sourceMappingURL=view.js.map