<script setup lang="ts">
import { ref } from 'vue'
import { makeWavefromProps } from '../composables/useProps'
import { useAVWaveform } from '../composables/useAVWaveform'

const props = defineProps(makeWavefromProps())
const emit = defineEmits(['showRecord'])
const player = ref(null)
const canvas = ref(null)

useAVWaveform(player, canvas, props, {
  options: { refetch: true },
  fetchOptions: { mode: 'no-cors', headers: {'Access-Control-Allow-Origin' : '*'} }
})

function showRecordBtn() {
  emit('showRecord')
}
</script>

<template>
  <div>
    <canvas ref="canvas" />
    <div class="row items-center justify-center">
      <q-btn
        @click="showRecordBtn"
        color="secondary"
        size="md"
        label="Ghi âm lại"
        no-caps
        class="q-mr-md"/>
      <audio ref="player"
        :controls="props.audioControls"
        :src="props.src" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.record-status {
  border-radius: 12px;
  background-color: #4DB6AC;
}
</style>
