/**
 * @file
 * Runtime fallback for collapsible media local tasks.
 */

(function (Drupal, once) {
  'use strict';

  /**
   * Applies open/closed display state to non-active tabs.
   *
   * @param {HTMLElement} nav - Tabs navigation element.
   * @param {boolean} isOpen - Whether tabs are open.
   */
  function applyState(nav, isOpen) {
    const target = nav.querySelector('[data-drupal-nav-tabs-target]');
    if (!target) {
      return;
    }

    const tabs = target.querySelectorAll(':scope > .tabs__tab');
    tabs.forEach(function (tab) {
      if (isOpen) {
        tab.style.display = 'flex';
      }
      else if (!tab.classList.contains('is-active')) {
        tab.style.removeProperty('display');
      }
    });
  }

  Drupal.behaviors.ffmpegMediaLocalTasks = {
    attach: function (context) {
      once('ffmpeg-media-local-tasks', 'nav[data-drupal-nav-tabs].is-collapsible', context).forEach(function (nav) {
        const target = nav.querySelector('[data-drupal-nav-tabs-target]');
        const trigger = nav.querySelector('[data-drupal-nav-tabs-trigger]');
        if (!target || !trigger) {
          return;
        }

        let openState = target.classList.contains('is-open');
        applyState(nav, openState);

        const onClick = function () {
          window.requestAnimationFrame(function () {
            let nextState = target.classList.contains('is-open');

            // Fallback when core toggle state was not updated.
            if (nextState === openState) {
              nextState = !openState;
              target.classList.toggle('is-open', nextState);
            }

            openState = nextState;
            trigger.setAttribute('aria-expanded', String(nextState));
            applyState(nav, nextState);
          });
        };

        const onResize = function () {
          if (nav.classList.contains('is-horizontal')) {
            const tabs = target.querySelectorAll(':scope > .tabs__tab');
            tabs.forEach(function (tab) {
              tab.style.removeProperty('display');
            });
            return;
          }

          applyState(nav, target.classList.contains('is-open'));
        };

        trigger.addEventListener('click', onClick);
        window.addEventListener('resize', onResize, { passive: true });

        nav.ffmpegLocalTasksCleanup = function () {
          trigger.removeEventListener('click', onClick);
          window.removeEventListener('resize', onResize);
          const tabs = target.querySelectorAll(':scope > .tabs__tab');
          tabs.forEach(function (tab) {
            tab.style.removeProperty('display');
          });
        };
      });
    },

    detach: function (context, settings, trigger) {
      if (trigger !== 'unload') {
        return;
      }

      const navs = context.querySelectorAll
        ? context.querySelectorAll('nav[data-drupal-nav-tabs].is-collapsible')
        : [];

      navs.forEach(function (nav) {
        if (typeof nav.ffmpegLocalTasksCleanup === 'function') {
          nav.ffmpegLocalTasksCleanup();
          delete nav.ffmpegLocalTasksCleanup;
        }
      });
    }
  };

})(Drupal, once);

