/**
 * AUX Video Page Header Controller
 *
 * Handle play/pause functionality for video elements in page headers.
 * Manage video playback state and update the toggle button's visual state
 * and accessibility attributes accordingly.
 *
 * This script is conditionally enqueued in the theme when a page has a video
 * header. Loaded by HeadService::enqueueLocalScript() in the
 * HeaderEntity::heroMediaHtml() method, which is called from
 * template-parts/main-content/header-hero.php.
 *
 * The script expects the following DOM elements to be present:
 * - An element with id "myVideo" (the video element)
 * - An element with id "toggleButton" (the play/pause toggle button)
 *
 * @see \WP_AUX\Entities\PageTemplate\HeaderEntity::heroMediaHtml()
 * @see \WP_AUX\Services\HeadService::enqueueLocalScript()
 * @since 1.0.0
 */

// Get references to the video element and play/pause toggle button
var myVideo = document.getElementById("myVideo");
var playPauseToggle = document.getElementById("toggleButton");

/**
 * Toggle video play/pause state
 *
 * Check the current playback state of the video and either play or pause it.
 * Update the toggle button's text content, CSS classes, and ARIA label to
 * reflect the current state.
 */
function togglePlayPause() {
  if (myVideo.paused) {
    // Video is paused, so play it
    myVideo.play();
    playPauseToggle.textContent = "";
    playPauseToggle.classList.remove("hero__video-controls--play");
    playPauseToggle.classList.add("hero__video-controls--pause");
    playPauseToggle.setAttribute("aria-label", "Pause video");
  } else {
    // Video is playing, so pause it
    myVideo.pause();
    playPauseToggle.textContent = " ";
    playPauseToggle.classList.remove("hero__video-controls--pause");
    playPauseToggle.classList.add("hero__video-controls--play");
    playPauseToggle.setAttribute("aria-label", "Play video");
  }
}
