<template>
  <div>
    <h1>Test Fall 3</h1>
    <h3>Dynamic Patches in parallel</h3>
    <div>
      <label for="patchCount">Number of Patches:</label>
      <input
        id="patchCount"
        v-model.number="patchCount"
        type="number"
        min="1"
        max="20"
        :disabled="isStarted"
      >
    </div>
    <button :disabled="isStarted" @click="startAllPatches">Start All Patches</button>
    <table v-if="isStarted">
      <thead>
        <tr>
          <th v-for="index in patchCount" :key="index">Patch {{ index }}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td v-for="(value, index) in controlValues" :key="index">{{ value?.value.toFixed(2) }}</td>
        </tr>
      </tbody>
    </table>

    <RNBOControlValue
      v-for="index in patchCount"
      :key="index"
      :ref="el => { if (el) rnboRefs[index - 1] = el }"
      :center-frequency="centerFrequencies.at(index - 1)"
      @control-value-change="updateValueTable(index - 1, $event)"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import RNBOControlValue from '@/components/experiments/tests/ControlValues/RNBOControlValue.vue'

const patchCount = ref(9)
const controlValues = ref([])
const rnboRefs = ref([])
const isStarted = ref(false)
const centerFrequencies = ref([63, 125, 250, 500, 1000, 2000, 4000, 8000, 16000])
const updateValueTable = (index, value) => {
  controlValues.value[index] = value
}

const startAllPatches = () => {
  isStarted.value = true
  rnboRefs.value.forEach((rnbo) => {
    if (rnbo && typeof rnbo.testControlValuesDevice === 'function') {
      rnbo.testControlValuesDevice()
    }
  })
}

const formatValue = (value) => {
  return Number(value).toFixed(2)
}

watch(patchCount, (newCount) => {
  controlValues.value = new Array(newCount).fill(0)
  rnboRefs.value = new Array(newCount).fill(null)
})
onMounted(() => {
  controlValues.value = new Array(patchCount.value).fill(0)
  rnboRefs.value = new Array(patchCount.value).fill(null)
})
</script>

<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}

th {
  background-color: #f2f2f2;
}

button, input {
  margin: 10px;
  padding: 10px;
  font-size: 16px;
}
button {
  cursor: pointer;
}

input:disabled, button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
</style>
