import { onMounted, onUnmounted, ref, nextTick } from 'vue'

export function useFillHeight(elementRef, marginBottom = 20) {
  const height = ref('auto')

  const updateHeight = () => {
    if (!elementRef.value) return

    const rect = elementRef.value.getBoundingClientRect()
    const windowHeight = window.innerHeight
    // Calculate available space: window height - element top position - margin bottom
    // We also need to account for the footer height if it's fixed or layout related
    // The user mentioned "margin bottom from footer".
    // If footer is in the flow, we might just want to fill the parent container?
    // But user asked for JS resizing.
    
    // Let's assume we want to fill down to (windowHeight - marginBottom).
    // This assumes the element should stretch to the bottom of the viewport.
    
    const availableHeight = windowHeight - rect.top - marginBottom
    
    // Ensure minimum height
    if (availableHeight > 100) {
      height.value = `${availableHeight}px`
    }
  }

  onMounted(() => {
    // Initial update after render
    nextTick(() => {
      updateHeight()
      window.addEventListener('resize', updateHeight)
    })
    
    // Also update after a short delay to ensure layout is settled (e.g. sidebar transitions)
    setTimeout(updateHeight, 300)
  })

  onUnmounted(() => {
    window.removeEventListener('resize', updateHeight)
  })

  return {
    height,
    updateHeight
  }
}