<template>
  <div class="audio-file-selector">
    <select v-model="selectedFile" @change="onFileSelect">
      <option value="">Select an audio file</option>
      <option v-for="(src, title) in audioFiles" :key="title" :value="src">
        {{ title }}
      </option>
    </select>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'AudioFileSelector',
  emits: ['file-selected'],
  setup (_, { emit }) {
    const config = useRuntimeConfig()
    const audioFiles = ref(config.public.tracks)

    const selectedFile = ref('')

    const onFileSelect = () => {
      const fullPath = window.location.origin + selectedFile.value
      emit('file-selected', fullPath)
    }

    return {
      audioFiles,
      selectedFile,
      onFileSelect
    }
  }
})
</script>
