<template>
  <div v-show="false" id="hiddenAudio">
    <AudioTagWebAudio
      ref="audioElement"
      :src="audioSrc"
      :volume="volume"
      :play="playing"
      :master-gain="masterGain"
      @canplay="onCanPlay"
    />
    <div class="noise-controlled-band">
      Gain: {{ gainValueDB }}
      <RNBOControlValue
        :center-frequency="centerFrequency"
        :status="playing"
        :attack="masterAttack"
        :release="masterRelease"
        :q-factor="qFactor"
        @control-value-change="handleValueChange"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from 'vue'
import type { Logger } from 'pino'
import RNBOControlValue from '../../tests/ControlValues/RNBOControlValue.vue'
import AudioTagWebAudio from '../../AudioTagWebAudio.vue'
import { calculateNormalizedVolume } from '~/lib/AudioFunctions'
import { useAudioStore } from '~/stores/audio'

export default defineComponent({
  name: 'NoiseControlledWebAudio3Band',
  components: {
    AudioTagWebAudio,
    RNBOControlValue
  },
  props: {
    centerFrequency: {
      type: Number,
      required: true
    },
    masterGain: {
      type: GainNode,
      required: true
    },
    masterAttack: {
      type: Number,
      default: 120000 * 2,
      required: false
    },
    masterRelease: {
      type: Number,
      default: 144000 / 1000,
      required: false
    },
    qFactor: {
      type: Number,
      required: true
    }
  },
  emits: ['ready'],
  setup (props, { emit }) {
    const audioElement = ref<InstanceType<typeof HTMLElement> | null>(null)
    const gainValueDB = ref(0)
    const volume = ref(1)
    const playing = computed(() => { return useAudioStore().getPlaying }) // the playing state is bind to the audioStore
    const logger = useNuxtApp().$logger as Logger
    const audioSrc = computed(() => {
      try {
        const frequency = props.centerFrequency

        let band = ''
        if (frequency < 500) {
          band = 'low_band'
        } else if (frequency >= 500 && frequency < 4000) {
          band = 'mid_band'
        } else {
          band = 'high_band'
        }

        const path = `/masking/3bands/${band}_256kbps.webm`
        const fullPath = `${window.location.origin}${encodeURI(path)}`
        return fullPath
      } catch (error) {
        return ''
      }
    })
    const handleValueChange = (data: { frequency: number; value: number }) => {
      // Convert dB to linear scale
      gainValueDB.value = calculateNormalizedVolume(data.value)
      volume.value = gainValueDB.value
    }

    const onCanPlay = () => {
      logger.info(`Audio for frequency ${props.centerFrequency} is ready to play`)
      emit('ready', props.centerFrequency)
    }

    return {
      audioElement,
      audioSrc,
      gainValueDB,
      volume,
      handleValueChange,
      onCanPlay,
      playing
    }
  }
})
</script>

<style scoped>
.noise-controlled-band {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
}
</style>
