<script setup lang="ts">
import { WorkflowAttachment } from "ChillMainAssets/types";
import GenericDocItemBox from "ChillMainAssets/vuejs/WorkflowAttachment/Component/GenericDocItemBox.vue";
import DocumentActionButtonsGroup from "ChillDocStoreAssets/vuejs/DocumentActionButtonsGroup.vue";

interface AttachmentListProps {
    attachments: WorkflowAttachment[];
}

const emit = defineEmits<{
    // eslint-disable-next-line @typescript-eslint/prefer-function-type
    (e: "removeAttachment", payload: { attachment: WorkflowAttachment }): void;
}>();

const props = defineProps<AttachmentListProps>();
</script>

<template>
    <p
        v-if="props.attachments.length === 0"
        class="chill-no-data-statement text-center"
    >
        Aucune pièce jointe
    </p>
    <!-- TODO translate -->
    <div else class="flex-table">
        <div v-for="a in props.attachments" :key="a.id" class="item-bloc">
            <generic-doc-item-box
                v-if="a.genericDoc !== null"
                :generic-doc="a.genericDoc"
            ></generic-doc-item-box>
            <div class="item-row separator">
                <ul class="record_actions">
                    <li v-if="a.genericDoc?.storedObject !== null">
                        <document-action-buttons-group
                            :stored-object="a.genericDoc.storedObject"
                        ></document-action-buttons-group>
                    </li>
                    <li>
                        <button
                            type="button"
                            class="btn btn-delete"
                            @click="emit('removeAttachment', { attachment: a })"
                        ></button>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss"></style>
