import { ref, Ref, onMounted } from 'vue'

/**
 * Utility to split slide content into header and main content sections
 * It extracts the first H1 from content and moves it to a separate header element
 * 
 * @param headerRef Ref to the header element where H1 will be moved
 * @param contentRef Ref to the content element containing the original content
 * @returns An object with setup function
 */
export function useHeaderContentSplit(headerRef: Ref<HTMLElement | null>, contentRef: Ref<HTMLElement | null>) {
  // Function to move H1 to header section
  const moveH1ToHeader = () => {
    if (!headerRef.value || !contentRef.value) return
    
    // Find the first H1 in content
    const firstH1 = contentRef.value.querySelector('h1')
    if (firstH1 && headerRef.value.children.length === 0) {
      // Move it to the header
      headerRef.value.appendChild(firstH1)
    }
  }

  const setupHeaderSplit = () => {
    // Initial move when component is mounted
    moveH1ToHeader()
    
    // Also set up a MutationObserver to handle dynamically loaded content
    const observer = new MutationObserver(() => {
      // If header is empty and there's an H1 in content, move it
      if (headerRef.value && headerRef.value.children.length === 0) {
        moveH1ToHeader()
      }
    })
    
    if (contentRef.value) {
      observer.observe(contentRef.value, { childList: true, subtree: true })
    }
    
    return {
      destroy: () => observer.disconnect()
    }
  }

  return {
    setupHeaderSplit
  }
}