<script setup>
import {ref} from "vue";
import {formatFileSize, formatDate, imageUrl} from "../utils.js";
import SlideOver from "../../../components/SlideOver/SlideOver.vue";
import DangerButton from "../../../components/Buttons/DangerButton.vue";
import ConfirmationModal from "../../../components/Modal/ConfirmationModal.vue";
import SecondaryButton from "../../../components/Buttons/SecondaryButton.vue";

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  file: {
    id: null,
    name: null,
    handle: null,
    size: null,
  },
});

const showDeleteFileModal = ref(false);

const closeDeleteFileModal = () => {
  showDeleteFileModal.value = false;
};

const confirmDeleteFile = async () => {
  await fetch(`${window.daylight.apiBase}/media/${props.file.id}`, {
    method: 'DELETE',
    headers: {
      'Content-Type': 'application/json',
      'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
    },
  });

  showDeleteFileModal.value = false;

  emit('fileDeleted');
  emit('close');
}

const emit = defineEmits(['close', 'fileDeleted']);
</script>

<template>
  <div>
    <SlideOver :show="show" @close="emit('close')">
      <template #header>
        <div class="space-y-1">
          <h2 class="text-base font-semibold leading-6 text-white" id="slide-over-title">
            {{file?.name}}
          </h2>
          <p class="text-sm text-white text-opacity-75">
            {{formatFileSize(file?.size)}}
          </p>
        </div>
      </template>

      <template #content>
        <div v-if="file" class="px-8 mt-6 ">
          <div class="mb-6" v-if="file && file.handle">
            <img class="w-full h-64 object-cover border rounded-lg" :src="imageUrl(file, 'raw')" alt="">
          </div>
          <div>
            <h3 class="font-medium text-gray-900">{{ __('daylight::media.information') }}</h3>
            <dl class="mt-2 divide-y divide-gray-200 border-b border-t border-gray-200">
              <div class="flex justify-between py-3 text-sm font-medium">
                <dt class="text-gray-500">{{ __('daylight::general.name') }}</dt>
                <dd class="whitespace-nowrap text-gray-900 max-w-80 truncate">
                  {{ file.name }}
                </dd>
              </div>
              <div class="flex justify-between py-3 text-sm font-medium">
                <dt class="text-gray-500">{{ __('daylight::media.created') }}</dt>
                <dd class="whitespace-nowrap text-gray-900">{{ formatDate(file.created_at) }}</dd>
              </div>
              <div class="flex justify-between py-3 text-sm font-medium">
                <dt class="text-gray-500">{{ __('daylight::media.size') }}</dt>
                <dd class="whitespace-nowrap text-gray-900">{{ formatFileSize(file.size) }}</dd>
              </div>
              <div class="flex justify-between py-3 text-sm font-medium">
                <dt class="text-gray-500">{{ __('daylight::media.mime') }}</dt>
                <dd class="whitespace-nowrap text-gray-900">{{ file.type }}</dd>
              </div>
              <div class="flex justify-between py-3 text-sm font-medium">
                <dt class="text-gray-500">{{ __('daylight::media.url') }}</dt>
                <dd class="whitespace-nowrap text-gray-900 max-w-80 truncate">
                  <a :href="imageUrl(file)" class="text-sky-500" target="_blank">
                    {{ imageUrl(file) }}
                  </a>
                </dd>
              </div>
            </dl>
          </div>
        </div>
      </template>

      <template #footer>
        <div class="flex justify-end">
          <DangerButton @click.prevent="showDeleteFileModal = true">
            {{ __('daylight::general.delete') }}
          </DangerButton>
        </div>
      </template>
    </SlideOver>

    <ConfirmationModal :show="showDeleteFileModal" @close="closeDeleteFileModal">
      <template #title>
        {{ __('daylight::general.confirm_deletion') }}
      </template>

      <template #content>
        {{ __('daylight::media.confirm_delete_file', { name: file.name }) }}
      </template>

      <template #footer>
        <div class="space-x-4">
          <SecondaryButton @click.prevent="closeDeleteFileModal">
            {{ __('daylight::general.cancel') }}
          </SecondaryButton>

          <DangerButton @click.prevent="confirmDeleteFile">
            {{ __('daylight::general.delete') }}
          </DangerButton>
        </div>
      </template>
    </ConfirmationModal>
  </div>
</template>
