<template>
  <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 pr-4">
    <div class="document-card p-4 rounded flex">
      <div class="deal-document-thumbnail w-16 h-16 shrink-0 rounded-lg overflow-hidden">
        <img v-if="isImage" :src="fileUrl" alt="Превью документа" class="w-full h-full object-cover" />

        <img v-else
             :src="defaultIconUrl"
             :alt="fileExtension + ' документ'"
             class="w-full h-full object-contain bg-gray-100" />

      </div>

      <!-- Название документа -->
      <div class="ml-4 flex flex-col justify-between grow min-w-0">
        <div class="font-bold text-gray-800 truncate">{{ doc.name || 'N/A' }}</div>
        <div class="flex min-w-0">
          <img src="@/shared/assets/icons/doc.svg" alt="Договор" class="w-5 h-5 shrink-0">
          <a :href="fileUrl" target="_blank" class="ml-2 underline document-file truncate">{{ getFileName(doc.file) || 'N/A'  }}</a>
        </div>
      </div>

      <button @click="confirmDelete" class="ml-auto mt-2 px-4 py-2 rounded">
<!--        <img src="@/shared/assets/icons/trash.svg" alt="Удалить" class="w-6 h-6">-->
        <span class="simple-button delete" title="Удалить"><i class="jw-action-icon-delete"></i></span>
      </button>
    </div>
  </div>

</template>

<script setup>
// import { useConfirm } from 'primevue/useconfirm';
// import { useToast } from 'primevue/usetoast';
 import { computed } from "vue";
import defaultIconUrl from '@/shared/assets/images/deal/deal-doc-icon.png';
import {useConfirm} from "primevue/useconfirm";
import {useToast} from "primevue/usetoast";

const props = defineProps({
  doc: {
    type: Object,
    required: false,
    validator: (doc) => doc.id && doc.name && doc.file
  },
  urlLaravel: {
    type: String,
    required: true
  }
});

const fileUrl = computed(() => {
  if (!props.doc.file) return '';
  return `${props.urlLaravel}/storage/${props.doc.file}`;
});

// // Проверка, является ли файл изображением
const isImage = computed(() => {
  if (!props.doc.file) return false;
  const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
  return imageExtensions.includes(fileExtension.value);
});

// // Расширение файла
const fileExtension = computed(() => {
  if (!props.doc.file) return false;
  return props.doc.file.split('.').pop().toLowerCase();
});
const getFileName = (fullPath) => {
  return fullPath.split('/').pop();
}


const emit = defineEmits(['remove']);

const confirm = useConfirm();
const toast = useToast();

const confirmDelete = (event) => {
  confirm.require({
    target: event.currentTarget,
    message: `Удалить документ "${props.doc.name}"?`,
    header: 'Подтверждение удаления',
    acceptLabel: 'Удалить',
    rejectLabel: 'Отмена',
    acceptClass: 'p-button-danger',
    accept: async () => {
      try {
        emit('remove', props.doc.id);
      } catch (error) {
        console.error('Ошибка при удалении документа:', error);
      }
    },
    reject: () => {
      toast.add({
        severity: 'info',
        summary: 'Отменено',
        detail: 'Удаление отменено',
        life: 2000
      });
    }
  });
};
</script>

<style scoped>
.addDeal__form {
  .document-card {
    background: linear-gradient(360deg, #F5F5F5 0%, #FFFFFF 100%);
    border: 1px solid #E0E0E0;
    border-radius: 5px;
    padding: 10px;
    a {
      border: none;
    }
    .deal-document-thumbnail {
      min-width: 4rem;
    }
    embed {
      pointer-events: none; /* Запрещаем взаимодействие с PDF внутри превью */
    }
    .document-file {
      font-family: 'Lato', sans-serif;
      font-style: normal;
      font-weight: 400;
      font-size: 12px;
      color: #757575;
    }
  }
}
</style>