<template>
  <div
    class="fixed w-screen h-screen overflow-hidden flex justify-center items-center z-50 backdrop-blur-sm backdrop-brightness-90"
    @click.self="$emit('close-modal')"
  >
    <div class="card w-[420px]">
      <div class="flex justify-center mb-5">
        <h4
          class="capitalize text-brand-blue-600 font-semibold dark:text-brand-scooter-500"
        >
          {{ props.type.title }}
        </h4>
      </div>
      <drop-zone
        class="px-5"
        @files-dropped="addFiles"
        #default="{ dropZoneActive }"
      >
        <div
          class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed dark:border-brand-scooter-300 rounded-md"
        >
          <div class="space-y-1 text-center">
            <image-upload-icon class="mx-auto h-12 w-12 text-gray-400" />
            <div class="flex text-sm text-gray-600 dark:text-brand-scooter-200">
              <div
                v-if="dropZoneActive"
                for="file-upload"
                class="relative flex flex-col items-center w-full cursor-pointer bg-white rounded-md font-medium text-brand-teal-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500"
              >
                <span>Drop a file</span>
                <input
                  id="file-upload"
                  name="file-upload"
                  type="file"
                  class="sr-only"
                  @change="onInputChange"
                />
              </div>
              <p v-else class="pl-1">Drag files here to upload</p>
            </div>
            <p class="text-xs text-gray-500 dark:text-brand-scooter-400">
              PNG, JPG, JPEG up to 5MB
            </p>
          </div>
        </div>
        <div v-if="files.length" class="row px-4">
          <div
            v-for="file in files"
            :key="file.id"
            class="w-full sm:w-1/2 p-1 flex-1"
          >
            <file-preview :file="file" tag="div" />
          </div>
        </div>
      </drop-zone>
      <div class="flex justify-end pr-5 mt-8">
        <button
          class="uppercase text-sm flex justify-center items-center px-8 h-10 bg-brand-blue-500 dark:bg-gray-600 hover:opacity-80 text-gray-50 rounded"
          @click="uploadCover"
        >
          upload
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import DropZone from '../DropZone.vue'
import FilePreview from '../FilePreview.vue'
import ImageUploadIcon from '../icons/ImageUploadIcon.vue'
import useFileList from '../compositions/file-list'
import createUploader from '../compositions/file-uploader'
import { useToast } from 'vue-toastification'

const { files, addFiles, onInputChange } = useFileList()

const props = defineProps({
  type: { required: true },
})

const emit = defineEmits(['close-modal'])

const toast = useToast()

async function uploadCover() {
  if (files.value.length > 0) {
    try {
      const { uploadFile } = createUploader(props.type.url)
      const res = await uploadFile(files.value[0])
      if (res.status === 200) {
        toast.success('cover upload successfully')
        emit('close-modal')
      }
    } catch (error) {
      toast.error('server is down, try again later')
      throw error
    }
  }
}
</script>
