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

  const single = ref()
  const insetSingle = ref()
  const multi = ref([])
  const insetMulti = ref([])
  const validated = ref()
  const custom = ref([])
  const form = ref()

  const required = [(v: any) => {
    const files = Array.isArray(v) ? v : v ? [v] : []
    return files.length > 0 || 'File is required'
  }]

  async function onSubmit () {
    const { valid } = await form.value.validate()
    if (valid) alert('Form is valid!')
  }

  function onReset () {
    form.value.reset()
  }

</script>

<template>
  <v-app theme="dark">
    <v-container max-width="800">
      <h2 class="text-h5 mb-4">Single File (list below)</h2>
      <v-file-upload v-model="single" clearable show-size />

      <v-divider class="my-8" />

      <h2 class="text-h5 mb-4">Single File (inset)</h2>
      <v-file-upload v-model="insetSingle" clearable inset-file-list show-size />

      <v-divider class="my-8" />

      <h2 class="text-h5 mb-4">Multiple Files (list below)</h2>
      <v-file-upload v-model="multi" clearable multiple show-size />

      <v-divider class="my-8" />

      <h2 class="text-h5 mb-4">Multiple Files (inset)</h2>
      <v-file-upload v-model="insetMulti" clearable inset-file-list multiple show-size />

      <v-divider class="my-8" />

      <h2 class="text-h5 mb-4">Custom Default Slot (Multiple list below)</h2>
      <v-file-upload v-model="custom" multiple>
        <v-file-upload-dropzone>
          <template #default="{ isDragging, props }">
            <div class="d-flex flex-column align-center w-100 py-16 px-4">
              <v-icon
                class="mb-4"
                icon="$upload"
                size="48"
                style="opacity: var(--v-medium-emphasis-opacity);"
              />

              <div class="text-h5 font-weight-semibold">
                {{ isDragging ? 'Release to drop' : 'Drag and drop files here' }}
              </div>

              <div class="d-flex align-center my-8" style="width: 150px;">
                <v-divider />
                <span class="mx-4 text-medium-emphasis text-caption">or</span>
                <v-divider />
              </div>

              <v-btn size="large" variant="tonal" @click="props.onClick">
                Browse Files
              </v-btn>
            </div>
          </template>
        </v-file-upload-dropzone>
        <v-file-upload-list v-if="custom.length" :files="custom">
          <template #default="{ files, onClickRemove }">
            <v-file-upload-item
              v-for="(file, index) in files"
              :key="index"
              :file="file"
              clearable
              show-size
              @click:remove="onClickRemove(index)"
            />
          </template>
        </v-file-upload-list>
      </v-file-upload>

      <v-divider class="my-8" />

      <h2 class="text-h5 mb-4">Form Validation</h2>
      <v-form ref="form" @submit.prevent="onSubmit">
        <v-file-upload
          v-model="validated"
          :rules="required"
          clearable
          show-size
        />

        <div class="d-flex ga-4 mt-4">
          <v-btn color="primary" type="submit">Submit</v-btn>
          <v-btn variant="outlined" @click="onReset">Reset</v-btn>
        </div>
      </v-form>
    </v-container>
  </v-app>
</template>