<template>
  <div class="row q-pa-lg">
    <div>
      <q-input
        v-model="componentTitle"
        test-id="componentTitleProp"
        label="component title"
      />
      <div
        v-for="item, index in progress"
        :key="index"
      >
        <q-input
          v-model="item.title"
          :test-id="'titleProp'+index"
          label="Title"
        />
        <q-toggle
          v-model="item.fulfilled"
          :test-id="'fulfilledProp'+index"
          label="fulfilled"
        />
        <q-toggle
          v-model="item.failed"
          :test-id="'failedProp'+index"
          label="failed"
        />
        <q-input
          v-model="item.progress"
          label="Progress"
          :test-id="'progressProp'+index"
          type="number"
        />
        <q-slider
          v-model="item.progress"
          :test-id="'progressBarProp'+index"
          label
          name="progress"
        />
        <q-btn
          label="Delete"
          @click="progress.splice(index, 1)"
        />
      </div>
      <q-btn
        label="New File"
        @click="progress.push({title:'new file', fulfilled: false, failed: false, progress: 0})"
      />
    </div>
    <q-separator
      :vertical="true"
      class="q-mx-lg"
    />
    <div class="col">
      <KFileUploaderProgress
        :list-of-progress="progress"
        :title="componentTitle"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
import KFileUploaderProgress from '../components/KFileUploaderProgress/KFileUploaderProgress.vue'
import { ref } from 'vue'

const componentTitle = ref()
const progress = ref<{title:string, fulfilled: boolean, failed: boolean, progress: number}[]>([{ title: 'file 1', fulfilled: false, failed: false, progress: 0 }])

</script>
