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

/**
 * Composable for image overlay functionality with M key toggle
 * Used in the main app layout for keyboard handling
 */
export function useImageOverlay() {
  const showImageOverlay = ref(false)

  const toggleImageOverlay = () => {
    showImageOverlay.value = !showImageOverlay.value
  }

  const handleKeyDown = (event: KeyboardEvent) => {
    // Toggle image overlay with 'M' key (case-insensitive)
    if (event.key.toLowerCase() === 'm') {
      event.preventDefault()
      toggleImageOverlay()
    }
  }

  onMounted(() => {
    window.addEventListener('keydown', handleKeyDown)
  })

  onUnmounted(() => {
    window.removeEventListener('keydown', handleKeyDown)
  })

  return {
    showImageOverlay,
    toggleImageOverlay,
  }
}