Onglets

@use 'mixins/mixins-customizables' as custom;
@use 'variables/variables-breakpoints' as breakpoints;

$prefix-list: 'tabs-list';
$prefix-header: 'tabs-header';
$prefix-button: 'tabs-button';

.tabs__header {
    --wrap: wrap;

    align-items: stretch;
    display: flex;
    flex-wrap: var(--wrap);
    max-width: 100%;
}

.tabs__header--addon {
    margin-inline-start: auto;

    @media (max-width: breakpoints.$screen-sm) {
        flex-basis: 100%;
    }
}

.tabs__list {
    @include custom.component($prefix-list, true);

    align-items: stretch;
    display: flex;
    flex-wrap: var(--wrap);
    list-style: none;
    margin: var(--space-0);
}

.tabs__button,
.tabs__button.button--tertiary.button--accent { // pour le dropdown
    @include custom.component($prefix-button, true);
    @include custom.component($prefix-button, true);
    @include custom.component($prefix-button, true);
    @include custom.component($prefix-button, true);

    align-items: center;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    white-space: nowrap;

    .icon {
        @include custom.icon;
    }

    svg {
        flex-shrink: 0;
    }
}

.tabs__button--current,
.tabs__button[aria-selected='true'] {
    @include custom.component($prefix-button);

    .icon {
        @include custom.icon;
    }
}

.tabs__limit-popover {
    .tabs__button {
        justify-content: start;
    }
}

.tabs__limit-popover:popover-open menu {
    align-items: start;
    display: flex;
    flex-direction: column;
    list-style: none;
}

.tabs__panel {
    padding-block: var(--space-4);

  &:has(> .surface) {
    padding-block: var(--space-0);
  }
}

.tabs--centered {
    .tabs__header {
        justify-content: center;
        max-inline-size: none;
        padding-block-start: var(--space-4);
    }
}

.tabs--skin-tabs {
    .tabs__header {
        @include custom.component($prefix-header, true);
    }

    .button[aria-selected='true'] {
        --button-content: var(--color1-10);
        --button-fill: var(--color1-70);
        --icon-foreground: var(--color1-10);
    }
}

.tabs--skin-tabs, .tabs--skin-pills {
    &.tabs--sm,
    &.tabs--md,
    &.tabs--lg,
    &.tabs--xl {
        .tabs__button,
        .tabs__button.button--tertiary.button--accent {
            @include custom.component($prefix-button);
            @include custom.component($prefix-button);

            .icon {
                @include custom.icon;
            }
        }
    }

    .button {
        --button-stroke: transparent;
    }

    .tabs__button:hover {
        @include custom.component($prefix-button);

        text-decoration: none;

        .icon {
            @include custom.icon;
        }
    }

    .tabs__button:focus {
        @include custom.component($prefix-button);

        .icon {
            @include custom.icon;
        }
    }
}

/**
 * Affiche un élement.
 * @param {HTMLElement} element - Element à afficher
 * @return {undefined}
 */
export function show(element) {
  element?.classList.remove('hidden');
}

/**
 * Cache un élement.
 * @param {HTMLElement} element - Element à cacher
 * @return {undefined}
 */
export function hide(element) {
  element?.classList.add('hidden');
}

/**
 * Sélectionne tab parmi les tabs.
 * @param {HTMLElement} tab le tab à sélectionner
 * @return {undefined}
 */
export function select(tab) {
  if (!tab) {
    return;
  }

  tab.closest('.js-tabs__list').querySelectorAll('.js-tabs__button').forEach((currentTab) => {
    currentTab.setAttribute('aria-selected', 'false');
    currentTab.setAttribute('tabindex', '-1');
    hide(getPanel(currentTab));
  });
  tab.setAttribute('aria-selected', 'true');
  tab.removeAttribute('tabindex');
  const panel = getPanel(tab);
  show(panel);
  tab.dispatchEvent(new CustomEvent('tab:change'));
}

/**
 * Récupère le panel associé à un tab.
 * @param {HTMLElement} tab le tab
 * @return {HTMLElement} le panel associé au tab
 */
function getPanel(tab) {
  return document.getElementById(tab.getAttribute('aria-controls'));
}

import {show, hide, select} from './tabs-core.js';
import {throttle} from './tabs-utils.js';

/**
 * Préparation de la limite des onglets basée sur la largeur du header.
 * @param {HTMLElement} tabs les onglets
 */
export function initEventsDropdown(tabs) {
  const dropdown = getDropdown(tabs);
  if (!dropdown) {
    return;
  }
  dropdown.addEventListener('keyup', handleKeyupDropdownButton(dropdown));
  dropdown.addEventListener('keydown', noGlobalScroll, {capture: true});
  dropdown.popoverTargetElement.addEventListener('keyup', handleKeyupDropdown(dropdown));
  dropdown.popoverTargetElement.addEventListener('click', handleClickDropdown(dropdown));
  dropdown.popoverTargetElement.addEventListener('keydown', noGlobalScroll, {capture: true});
}

/**
 * Préparation de la limite des onglets basée sur la largeur du header.
 * @param {HTMLElement} tabs les onglets
 */
export function prepareLimit(tabs) {
  const tabsHeader = tabs.querySelector(':scope > .js-tabs__header');
  const tabsList = tabsHeader.querySelector(':scope > .js-tabs__list');
  const dropdown = tabsList.querySelector(`[data-dropdown="${tabsList.dataset.scope}"]`);
  const dropdownMenu = document.createElement('div');
  dropdownMenu.classList.add('l-flex', 'l-flex-column');
  dropdown.popoverTargetElement.appendChild(dropdownMenu);
  createResizeObserver(tabsHeader, tabsList, dropdown, dropdownMenu);
  createMutationObserver(tabsHeader, tabsList, dropdown, dropdownMenu);
}

/**
 * Observe les modifications de taille de la barre d'onglets
 * @param {HTMLElement} tabsHeader conteneur sur lequel la largeur est testée
 * @param {HTMLElement} tabsList liste des onglets
 * @param {HTMLButtonElement} dropdown bouton dropdown
 * @param {HTMLElement} popoverTarget cible de rangement des onglets
 */
function createResizeObserver(tabsHeader, tabsList, dropdown, popoverTarget) {
  const resizeObserver = new ResizeObserver(() => {
    throttledAdapt(tabsHeader, tabsList, dropdown, popoverTarget);
  });
  resizeObserver.observe(tabsHeader);
  adapt(tabsHeader, tabsList, dropdown, popoverTarget);
}

/**
 * Observe les modifications de taille de la barre d'onglets
 * @param {HTMLElement} tabsHeader conteneur sur lequel la largeur est testée
 * @param {HTMLElement} tabsList liste des onglets
 * @param {HTMLButtonElement} dropdown bouton dropdown
 * @param {HTMLElement} popoverTarget cible de rangement des onglets
 */
function createMutationObserver(tabsHeader, tabsList, dropdown, popoverTarget) {
  const mutationObserver = new MutationObserver(() => {
    updateDropdown(tabsHeader, dropdown, popoverTarget);
  });
  mutationObserver.observe(popoverTarget, {subtree: true, attributes: true, attributeFilter: ['aria-selected']});
}

/**
 * Décide du titre à afficher pour le bouton « plus d'onglets»
 * @param {HTMLElement} tabsHeader conteneur sur lequel la largeur est testée
 * @param {HTMLButtonElement} dropdown bouton dropdown
 * @param {HTMLElement} popoverTarget cible de rangement des onglets
 */
function updateDropdown(tabsHeader, dropdown, popoverTarget) {
  const selectedEntry = popoverTarget.querySelector(':scope [aria-selected="true"]');
  const dropdownTitleElement = dropdown.querySelector(':scope .u-popover__title');
  if (selectedEntry) {
    if (!dropdownTitleElement.dataset.oldTitle) {
      dropdownTitleElement.dataset.oldTitle = dropdownTitleElement.innerHTML;
    }
    dropdownTitleElement.innerHTML = selectedEntry.querySelector('.js-tabs__label').innerHTML;
    dropdown.setAttribute('aria-selected', 'true');
    dropdown.setAttribute('tabindex', '0');
  } else {
    dropdown.setAttribute('aria-selected', 'false');
    dropdown.setAttribute('tabindex', '-1');
  }
  if (!selectedEntry && dropdownTitleElement.dataset.oldTitle) {
    dropdownTitleElement.innerHTML = dropdownTitleElement.dataset.oldTitle;
  }
}

/**
 * Adaptation des onglets si trop large
 * @param {HTMLElement} tabsHeader conteneur sur lequel la largeur est testée
 * @param {HTMLElement} tabsList liste des onglets
 * @param {HTMLButtonElement} dropdown bouton dropdown
 * @param {HTMLElement} popoverTarget cible de rangement des onglets
 */
function adapt(tabsHeader, tabsList, dropdown, popoverTarget) {
  updateDropdown(tabsHeader, dropdown, popoverTarget);
  popAllTabs(tabsList, popoverTarget);
  show(dropdown);
  while (isOverflown(tabsList, tabsHeader) && tabsList.querySelectorAll(':scope > .js-tabs__button').length > 0) {
    const toMove = Array.from(tabsList.querySelectorAll(':scope > .js-tabs__button')).at(-1);
    toMove.removeAttribute('tabindex');
    popoverTarget.prepend(toMove);
  }
  if (popoverTarget.querySelectorAll(':scope > .js-tabs__button').length === 0) {
    hide(dropdown);
  }
  tabsList.append(dropdown);
  updateDropdown(tabsHeader, dropdown, popoverTarget);
}

/**
 * Version limitée de `adapt`.
 * @type {Function}
 */
const throttledAdapt = throttle(adapt, 50);

/**
 * Sort tous les boutons du popover s'arrête si l'un d'entre eux est sélectionné.
 * @param {HTMLElement} tabsList liste des onglets
 * @param {HTMLElement} popoverTarget cible de rangement des onglets
 */
function popAllTabs(tabsList, popoverTarget) {
  let nextTab = popoverTarget.querySelector('.js-tabs__button');
  while (nextTab) {
    tabsList.append(nextTab);
    nextTab = popoverTarget.querySelector('.js-tabs__button');
  }
}

/**
 * Vérifie si un élément est plus large que l'espace qui lui ai réversé
 * @param {HTMLElement} element élément sur lequel la largeur est testée
 * @param {HTMLElement} parent conteneur dans lequel la largeur est testée
 * @return {boolean} true si le flex du conteneur a déclenché le wrap et qu'un élément est plus «bas» que le conteneur
 */
function isOverflown(element, parent) {
  const availableWidth = parent.getBoundingClientRect().width - Array.from(parent.children)
    .filter(i => i !== element)
    .map(i => i.getBoundingClientRect().width)
    .reduce((a,c) => a+c, 0);

  return element.getBoundingClientRect().width > availableWidth - 50;
}

/**
 * Fabrique de gestionnaire d'événements clavier pour les items du dropdown.
 * @param {HTMLButtonElement} dropdown bouton du menu
 * @return {EventListener} le gestionnaire
 */
function handleKeyupDropdown(dropdown) {
  const keysAction = {
    ArrowDown: focusNextItemDropdown,
    ArrowUp: focusPreviousItemDropdown,
    Home: openFirstItemDropdown,
    End: openLastItemDropdown,
  };

  /**
   * Gestionnaire d'événement clavier pour les dropdowns.
   * @param {KeyboardEvent} event event
   */
  return function handleKeyupEventHandler(event) {
    event.stopPropagation();
    const buttons = Array.from(dropdown.popoverTargetElement.querySelectorAll('.js-tabs__button'));
    const currentButtonIndex = buttons.findIndex((b) => b.id === event.target.id);
    if (Object.hasOwn(keysAction, event.key)) {
      keysAction[event.key]({currentButtonIndex, event, buttons, dropdown});
    }
  };
}

/**
 * Active l'onglet précédent.
 */
function focusPreviousTab({dropdown}) {
  dropdown.popoverTargetElement.hidePopover();
  const tabButtons = dropdown?.closest('.js-tabs__list')?.querySelectorAll(':scope > .js-tabs__button--focusable:not(.tabs__limit-dropdown)');
  if (tabButtons && tabButtons.length > 0) {
    tabButtons.item(tabButtons.length - 1).focus();
  }
}

/**
 * Fabrique de gestionnaire d'événements clavier pour les items du dropdown.
 * @param {HTMLButtonElement} dropdown bouton du menu
 * @return {EventListener} le gestionnaire
 */
function handleKeyupDropdownButton(dropdown) {

  /**
   * Gestionnaire d'événement clavier pour les dropdowns.
   * @param {KeyboardEvent} event event
   */
  return function handleKeyupEventHandler(event) {
    event.stopPropagation();
    event.preventDefault();
    const buttons = Array.from(dropdown.popoverTargetElement.querySelectorAll('.js-tabs__button'));
    if (event.key === 'ArrowDown') {
      openFirstItemDropdown({buttons});
    } else if (event.key === 'ArrowLeft') {
      focusPreviousTab({dropdown});
    }
  };
}
/**
 * Empêche le scroll lorsque l'utilisateur utilise les flèches haut et bas sur le dropdown.
 * @param {KeyboardEvent} event event
 */
function noGlobalScroll(event) {
  if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
    event.stopImmediatePropagation();
    event.preventDefault();
  }
}

/**
 * Sélectionne l'onglet du popover.
 * @param {HTMLButtonElement} dropdown le bouton de popover
 * @param {Event} event l'événement déclencheur
 */
function selectTab({dropdown, event}) {
  const currentTab = event.target.closest('.js-tabs__button');
  select(currentTab);
  dropdown.setAttribute('aria-selected', 'true');
  dropdown.setAttribute('tabindex', '0');
  dropdown.popoverTargetElement.hidePopover();
}

/**
 * Fabrique de gestionnaire d'événements de click pour le dropdown.
 * @param {HTMLButtonElement} dropdown bouton du menu
 * @return {EventListener} le gestionnaire
 */
function handleClickDropdown(dropdown) {

  /**
   * Gestionnaire d'événement click pour le dropdown.
   * @param {MouseEvent} event event
   */
  return function handleClickDropdownHandler(event) {
    selectTab({dropdown, event});
  };
}

/**
 * Active l'élément suivant dans le dropdown.
 * @param {Number} currentButtonIndex index du menu courrant
 * @param {HTMLButtonElement[]} buttons tableau des buttons du menu
 */
function focusNextItemDropdown({currentButtonIndex, buttons}) {
  if (currentButtonIndex < buttons.length) {
    buttons[currentButtonIndex + 1]?.focus();
  }
}

/**
 * Active l'élément précédent dans le dropdown.
 * @param {Number} currentButtonIndex index du menu courrant
 * @param {HTMLButtonElement[]} buttons tableau des buttons du menu
 */
function focusPreviousItemDropdown({currentButtonIndex, buttons}) {
  if (currentButtonIndex > 0) {
    buttons[currentButtonIndex - 1]?.focus();
  }
}

/**
 * Active le premier élément dans le dropdown.
 * @param {HTMLButtonElement[]} buttons tableau des buttons du menu
 */
function openFirstItemDropdown({buttons}) {
  buttons[0]?.focus();
}

/**
 * Active le dernier élément dans le dropdown.
 * @param {HTMLButtonElement[]} buttons tableau des buttons du menu
 */
function openLastItemDropdown({buttons}) {
  buttons[buttons.length - 1]?.focus();
}

/**
 * Récupère le dropdown si présent.
 * @param {HTMLElement} tabs
 * @return {HTMLButtonElement} dropdown
 */
export function getDropdown(tabs) {
  return tabs.querySelector(`[data-dropdown="${tabs.dataset.key}"]`);
}

import {select} from './tabs-core.js';
import {getDropdown} from './tabs-limit.js';

/**
 * Application des recommandations présentent ici : https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
 */
/**
 * Initialise les événements des boutons des onglets.
 * @param {HTMLElement} tabs les onglets
 * @param {HTMLButtonElement[]} tabButtons les boutons des onglets
 * @return {undefined}
 */
export function initEventsButton(tabs, tabButtons) {
  tabs.addEventListener('keyup', handleTabsKeyup(tabs), true);
  for (const currentTab of tabButtons) {
    currentTab.addEventListener('focus', handleClickHandler, true);
  }
}

/**
 * Fonction permettant de gérer les événements de type 'focus' sur les onglets.
 * @param {Event} event l'événement créé par le click.
 * @return {undefined}
 */
function handleClickHandler(event) {
  event.preventDefault();
  select(event.currentTarget);
}

/**
 * Active l'onglet ou le dropdown.
 * @param {HTMLButtonElement} tab l'onglet à activer
 */
function focusTab(tab) {
  tab?.focus();
}

/**
 * Active l'onglet précédent.
 * @param {Number} currentTabIndex index de l'onglet courant
 * @param {HTMLButtonElement[]} tabs tableau des onglets
 */
function focusPreviousTab({currentTabIndex, tabs}) {
  if (currentTabIndex > 0) {
    focusTab(tabs[currentTabIndex - 1]);
  }
}

/**
 * Active l'onglet suivant.
 * @param {Number} currentTabIndex index de l'onglet courant
 * @param {HTMLButtonElement[]} tabs tableau des onglets
 */
function focusNextTab({currentTabIndex, tabs}) {
  if (currentTabIndex !== -1 && currentTabIndex < tabs.length - 1) {
    focusTab(tabs[currentTabIndex + 1]);
  }
}

/**
 * Active le premier onglet.
 * @param {HTMLElement[]} tabs tableau des onglets
 */
function focusFirstTab({tabs}) {
  focusTab(tabs[0]);
}

/**
 * Active le dernier onglet.
 * @param {HTMLElement[]} tabs tableau des onglets
 */
function focusLastTab({tabs}) {
  focusTab(tabs[tabs.length - 1]);
}

/**
 * Fabrique pour la gestion des événements des onglets.
 * @param {HTMLElement} tabs les onglets
 * @return {EventListener} le gestionnaire
 */
function handleTabsKeyup(tabs) {
  /**
   * Fonction permettant de gérer les événements de type 'click' sur les onglets.
   * @param {Event} event l'événement créé par le click.
   * @returns {void}
   */
  return function tabsKeyupHandler(event) {
    if (!event.target.classList.contains('js-tabs__button')) {
      return;
    }
    if (event.target.closest(`[data-key]`).dataset.key !== tabs.dataset.key) {
      return;
    }
    const tabButtonsList = Array.from(tabs.querySelectorAll(`[data-scope="${tabs.dataset.key}"] > .js-tabs__button--focusable`));
    const dropdown = getDropdown(tabs);
    if (dropdown) {
      tabButtonsList.push(dropdown);
    }
    const currentTabIndex = tabButtonsList.findIndex((t) => t.getAttribute('aria-selected') === 'true');
    const keysAction = {
      ArrowLeft: focusPreviousTab,
      ArrowRight: focusNextTab,
      Home: focusFirstTab,
      End: focusLastTab
    };
    if (Object.hasOwn(keysAction, event.key)) {
      keysAction[event.key]({currentTabIndex, tabs: tabButtonsList});
    }
  };
}

/**
 * Évite qu'une fonction soit appelée trop fréquemment.
 * @param {Function} func la function
 * @param {number} limit
 * @return {Function} la même fonction mais avec la limite
 */
export function throttle(func, limit) {
  let lastFunc;
  let lastRan;
  return (...args) => {
    const delta = Date.now() - (lastRan ?? 0);
    if (!lastRan) {
      func(...args);
      lastRan = Date.now();
    } else {
      if (delta > limit) {
        func(...args);
        lastRan = Date.now();
      } else {
        clearTimeout(lastFunc);
        lastFunc = setTimeout(() => {
          func(...args);
          lastRan = Date.now();
        }, Math.max(0, limit - delta));
      }
    }
  };
}

import {initEventsDropdown, prepareLimit} from './tabs-limit.js';
import {initEventsButton} from './tabs-navigation.js';
import {select} from './tabs-core.js';
import {onPageReady} from '/static/js/script-loader-helper.js';

export function initTabs(tabs) {
  const tabButtonsList = Array.from(tabs.querySelectorAll(`[data-scope="${tabs.dataset.key}"] > .js-tabs__button`));
  initEventsButton(tabs, tabButtonsList);
  let selectedTab = tabs.querySelector(`[data-scope="${tabs.dataset.key}"] > .js-tabs__button[data-selected="true"]`);
  if (selectedTab) {
    delete selectedTab.dataset.selected;
  } else {
    selectedTab = tabButtonsList[0];
  }
  select(selectedTab);

}

/**
 * Attente que la page soit entièrement chargée.
 */
onPageReady(() => {

  /**
   * Initialisation des onglets.
   */
  document.querySelectorAll('.js-tabs.js-tabs-not-initialized').forEach((tabs) => {
    initTabs(tabs);
    tabs.classList.remove('js-tabs-not-initialized');
  });

  /**
   * Préparation des limites
   */
  document.querySelectorAll('.js-tabs.tabs--limited.js-limit-not-initialized').forEach((tabs) => {
    prepareLimit(tabs);
    initEventsDropdown(tabs);
    tabs.classList.remove('js-limit-not-initialized');
  });
});