<template>
  <div>
    <q-dialog
      v-model="isPopupOpen"
    >
      <q-card class="file-popup-card">
        <q-card-section class="row items-center q-pb-none">
          <div class="text-h6">
            {{ title }}
          </div>
          <q-space />
          <q-btn
            v-close-popup
            icon="close"
            flat
            round
            dense
          />
        </q-card-section>

        <q-card-section
          v-if="!hideUploader"
          class="q-pt-md overflow-auto"
        >
          <q-file
            v-model="fileToUpload"
            label="Upload a file"
            filled
            bottom-slots
            counter
            @update:model-value="uploadFile"
            @rejected="onRejected"
          >
            <template #prepend>
              <q-icon name="attach_file" />
            </template>
            <template #append>
              <q-icon
                name="close"
                class="cursor-pointer"
                @click.stop="fileToUpload = null"
              />
            </template>
            <template #hint>
              Max file size: 30MB
            </template>
          </q-file>
        </q-card-section>

        <q-card-section
          v-if="files.length !== 0"
          class="q-pt-md"
        >
          <q-list separator>
            <q-item
              v-for="file in files"
              :key="file.name"
              class="q-py-sm"
            >
              <q-item-section>
                <q-item-label
                  class="text-body1 overflow-hidden ellipsis"
                  hint="hola"
                >
                  {{ file.name }}
                </q-item-label>
              </q-item-section>
              <q-item-section side>
                <q-btn
                  v-if="!file.contentUrl"
                  flat
                  round
                  color="primary"
                  icon="cloud_download"
                  @click="
                    emit('downloadFile', file, onSuccess, onRejected)"
                >
                  <q-tooltip>Download file</q-tooltip>
                </q-btn>
                <q-btn
                  v-else
                  flat
                  round
                  color="primary"
                  icon="visibility"
                  @click="
                    emit('viewFile', file)"
                >
                  <q-tooltip>View file</q-tooltip>
                </q-btn>
              </q-item-section>
            </q-item>
          </q-list>
        </q-card-section>
        <q-card-section v-else>
          <div class="text-h6">
            {{ noFilesMessage }}
          </div>
        </q-card-section>
        <q-card-actions align="right">
          <q-btn
            v-close-popup
            flat
            label="Close"
            color="primary"
          />
        </q-card-actions>
      </q-card>
    </q-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { KFileManagerProps } from './types'

const emit = defineEmits(['downloadFile', 'uploadFile', 'viewFile'])
const isPopupOpen = defineModel<boolean>()
const { title = 'File Management', files, hideUploader = false, noFilesMessage = 'No files to display' } = defineProps<KFileManagerProps>()

const fileToUpload = ref<File | null>(null)

const uploadFile = () => {
  if (fileToUpload.value) {
    emit('uploadFile', fileToUpload.value, onSuccess, onRejected)
    console.log(`Uploading file: ${fileToUpload.value.name}`)
    // $q.notify({
    //   message: 'File upload started',
    //   icon: 'cloud_upload'
    // })
    // After successful upload, you might want to clear the file input
  }
}

const onSuccess = () => {
  // Notify the user about successful uploads
  // $q.notify({
  //   type: 'positive',
  //   message: `${uploadedEntries.length} file(s) uploaded successfully`
  // })
  fileToUpload.value = null
}

const onRejected = () => {
  // Notify the user about rejected files
  // $q.notify({
  //   type: 'negative',
  //   message: `${rejectedEntries.length} file(s) did not pass validation constraints`
  // })
  console.log('Rejected files')
}
</script>

<style scoped>
.file-popup-card {
  width: 100%;
  max-width: 400px;
}

/* Custom scrollbar styles */
.q-card__section::-webkit-scrollbar {
  width: 8px;
}

.q-card__section::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.q-card__section::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.q-card__section::-webkit-scrollbar-thumb:hover {
  background: #555;
}
</style>
