<template>
  <div>
    <div v-if="files.data && files.data.length > 0">
      <div :class="{ 'grid-cols-3 lg:grid-cols-6': selectable, 'grid-cols-3 lg:grid-cols-10': !selectable }" class="grid gap-4 lg:gap-6 mt-8 mb-6">
        <File
            v-for="file in files.data"
            :selectable="selectable"
            :selected="selectedItems.some(item => item.id === file.id)"
            :key="file.id"
            :file="file"
            @showInformation="showFileInformation"
            @selectFile="emit('selectFile', file)"
        />
      </div>

      <Pagination
          class="my-6"
          :links="files.links"
          v-if="files.links.length > 3"
          @changePage="emit('changePage', $event)"
      />
    </div>

    <FileInformation
        :show="showFileInformationModal"
        :file="fileInformation"
        @fileDeleted="emit('fileDeleted', $event)"
        @close="showFileInformationModal = false"
    />
  </div>
</template>

<script setup>
import FileInformation from "./FileInformation.vue";
import File from "./File.vue";
import Pagination from "../../../components/Pagination.vue";
import {ref} from "vue";

const props = defineProps({
  files: {
    type: Object,
    default: () => ({data: [], links: []}),
  },
  selectable: {
    type: Boolean,
    default: false,
  },
  selectedItems: {
    type: Array,
    default: () => [],
  },
});

const emit = defineEmits(['changePage', 'selectFile', 'fileDeleted'])

const showFileInformationModal = ref(false)
const fileInformation = ref(null)

const showFileInformation = (file) => {
  fileInformation.value = file
  showFileInformationModal.value = true
}

</script>