<!--
/**
 * @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 1 mit Control Value Patch</h1>

    <h3> Ein AudioTag, dass über die Volume-APi gesteuert wird</h3>
    <div v-if="isExperimentsRoute">
      <KeyboardPlayHandler />
      <PlayButton />
    </div>
    <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>
    <NoiseControlledBand
      v-for="frequency in frequencies"
      :key="frequency"
      :master-attack="masterAttack"
      :master-release="masterRelease"
      :center-frequency="frequency"
      @ready="onBandReady"
    />
  </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 NoiseControlledBand from '~/components/experiments/tests/ControlValues/NoiseControlledBand.vue'

export default defineComponent({
  components: {
    NoiseControlledBand,
    KeyboardPlayHandler,
    PlayButton
  },
  setup () {
    const { t } = useI18n()
    const frequencies = ref([63, 125, 250, 500, 1000, 2000, 4000, 8000, 16000])
    const loadedBands = ref(0)

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

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

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

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

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