<template>
  <div class="p-p-6">
    <h1 class="p-my-0">Host</h1>
    <FileSelect v-if="!file" message="Drag a H.264 encoded MP4 here to start a screen." @selected="filesSelected" />
  </div>
</template>

<script>
import { useToast } from 'primevue/usetoast'
import { ref } from 'vue'

export default {
  setup () {
    const toast = useToast()

    const file = ref()

    const filesSelected = (files) => {
      if (files?.length !== 1) {
        toast.add({ severity: 'error', summary: 'Bad file input', detail: 'You must select only one file.', life: 3000 })
        return
      }

      if (!files[0].name.endsWith('.mp4') || files[0].type !== 'video/mp4') {
        toast.add({ severity: 'error', summary: 'Bad file input', detail: 'Only H.264 encoded MP4s are supported.', life: 3000 })
        return
      }

      file.value = files[0]
    }

    return {
      filesSelected,
      file
    }
  }
}
</script>

<style>

</style>
