<script lang="ts" setup>
import { ref } from 'vue'
import DiskReader from '@/components/DiskReader.vue'

const loadName = ref('')
const loadTotal = ref(0)
const loadLoaded = ref(0)

function handleStart(name: string) {
  console.log(`Loading file: ${name}`)
  loadName.value = name
  loadLoaded.value = 0
  loadTotal.value = -1
}

function handleLoad(data: ArrayBuffer) {
  console.log('File loaded')
  console.log(data)
}

function handleError(message: string) {
  console.log('Error loading file' + message)
  loadLoaded.value = -1
  loadTotal.value = -1
}

function handleProgress(loaded: number, total: number) {
  loadLoaded.value = loaded
  loadTotal.value = total
}
</script>

<template>
  <section>
    <h2>Playground</h2>
    <p>This is my playground for testing out my code.</p>
    <section>
      <h3>Upload Disk</h3>
      <DiskReader
        @error="handleError"
        @load="handleLoad"
        @progress="handleProgress"
        @start="handleStart"
      />
      <div v-if="loadName">
        Loading {{ loadName }}
        <progress :max="loadTotal" :value="loadLoaded">
          {{ ((loadLoaded / loadTotal) * 100.0).toFixed(2) }} %
        </progress>
        {{ ((loadLoaded / loadTotal) * 100.0).toFixed(2) }} %
      </div>
    </section>
  </section>
</template>

<style scoped>
progress {
  margin-top: 1em;
  margin-left: 1em;
  margin-right: 0.25em;
}
</style>
