<template>
  <div v-if="false">AudioStateHandler</div>
</template>
<script>
import { mapState, mapActions } from 'pinia'
import { useAudioStore } from '~/stores/audio'

export default {
  name: 'AudioStateHandler',

  computed: {
    ...mapState(useAudioStore, ['playing'])
  },

  watch: {
    playing (newValue) {
      this.$logger.log('Global playing state changed', newValue)
    }
  },

  mounted () {
    window.addEventListener('keydown', this.handleKeyDown)
    this.$logger.log('Global audio state handler mounted')

    // Set up MediaSession API
    if ('mediaSession' in navigator) {
      navigator.mediaSession.setActionHandler('play', () => this.setPlaying(true))
      navigator.mediaSession.setActionHandler('pause', () => this.setPlaying(false))
    }
  },

  beforeUnmount () {
    window.removeEventListener('keydown', this.handleKeyDown)
  },

  methods: {
    ...mapActions(useAudioStore, ['setPlaying'])
    /** handleKeyDown (e) {
      const activeElement = document.activeElement
      const tagName = activeElement.tagName.toLowerCase()

      // List of elements where spacebar interaction should be preserved
      const interactiveElements = [
        'input', 'textarea', 'button', 'select', 'option',
        'video', 'audio', 'a', 'summary'
      ]

      // Check for contenteditable attribute
      const isContentEditable = activeElement.getAttribute('contenteditable') === 'true'

      // Check for custom data attribute that might indicate spacebar interaction
      const usesSpacebar = activeElement.getAttribute('data-uses-spacebar') === 'true'

      if (e.code === 'Space' &&
          !interactiveElements.includes(tagName) &&
          !isContentEditable &&
          !usesSpacebar) {
        this.$logger.log('Space key pressed in AudioStateHandler')
        e.preventDefault() // Prevent the default action (scrolling)
        this.setPlaying(!this.playing)
        this.$logger.log('New playing state:', this.playing)
      }
    } */
  }
}
</script>
