<!--
/**
 * @component ControlValueBasedPlayer
 * @description A component that renders multiple NoiseControlledBand components,
 *              each centered around a specific frequency. This can be used for
 *              audio spectrum visualization or control. Now includes a loading spinner
 *              that disappears when all NoiseControlledBand components are ready.
 *
 * @uses NoiseControlledBand
 *
 * @example
 * <ControlValueBasedPlayer />
 *
 * @remarks
 * - Utilizes Vue 3 Composition API
 * - Renders NoiseControlledBand components for standard audio frequency bands
 * - Frequencies: 63, 125, 250, 500, 1000, 2000, 4000, 8000, 16000 Hz
 * - Includes a loading spinner that disappears when all components are ready
 */
-->

<template>
  <div>
    <h1> Test Fall 3 mit Control Value Patch</h1>
    <h3> Drei AudioTags gesteuert über 3 RNBOControlValues. Über die Volume-APi wird die Lautstärke gesteuert</h3>
    <div v-if="isExperimentsRoute">
      <KeyboardPlayHandler />
      <PlayButton />

      <div v-if="loading" class="spinner-border spinner-border-sm" role="status">
        <span class="sr-only">{{ t("Loading...") }}</span>
      </div>
      Loaded Bands: {{ loadedBands }}
      <div>
        <label>Attack: {{ (masterAttack / 480000).toFixed(2) }}s</label>
        <input
          v-model.number="masterAttack"
          type="range"
          :min="4800"
          :max="1920000"
        >
        <label>Release: {{ (masterRelease / 480000).toFixed(2) }}s</label>
        <input
          v-model.number="masterRelease"
          type="range"
          :min="4800"
          :max="1920000"
        >
      </div>
      <NoiseControlled3Band
        v-for="(frequency, index) in frequencies"
        :key="frequency"
        :master-attack="masterAttack"
        :master-release="masterRelease"
        :center-frequency="frequency"
        :q-factor="qFactors[index]"
        @ready="onBandReady"
        @update:mid-volume="controlMusicGain"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRoute } from 'vue-router'
import KeyboardPlayHandler from '~/archive/components/KeyboardPlayHandler.vue'
import PlayButton from '~/components/experiments/statemanagement/PlayButton.vue'
import NoiseControlled3Band from '~/components/experiments/tests/ControlValues/NoiseControlled3Band.vue'

export default defineComponent({
  components: {
    NoiseControlled3Band,
    KeyboardPlayHandler,
    PlayButton
  },
  setup () {
    const { t } = useI18n()
    const frequencies = ref([150, 1500, 8000])
    const qFactors = ref([0.8, 0.9, 0.6])
    const loadedBands = ref(0)

    const route = useRoute()
    const isExperimentsRoute = computed(() => route.path.match(/\/[a-z]{2}\/experiments/))

    const masterAttack = ref(120000 * 2) // Beispielwert in Samples
    const masterRelease = ref(144000 * 2)

    const loading = computed(() => loadedBands.value < frequencies.value.length)

    const onBandReady = () => {
      loadedBands.value++
    }

    return {
      frequencies,
      loading,
      onBandReady,
      t,
      loadedBands,
      masterAttack,
      masterRelease,
      isExperimentsRoute,
      qFactors,
      controlMusicGain
    }
  }
})
</script>
