<script setup>
    import { onMounted } from 'vue';
    import useAttachments from '../composables/useAttachments';
    import Spiner from './ui/Spiner.vue';
    import { useLoadsStore } from '../stores/loads';
    import { useI18n } from 'vue-i18n';

    const baseUrl = import.meta.env.VITE_API_URL;

    const loadStore = useLoadsStore();
    const { getAttachmentLoad, loading, attachments } = useAttachments();

    onMounted(() => {
        getAttachmentLoad();
    })
    const { t } = useI18n();
    const clearLoad = () => {
        loadStore.openAttachmentsModal = false;
        loadStore.currentLoad = null;
    }

</script>

<template>
    <div class="modal fade" id="attachmentModal" tabindex="-1" role="dialog" aria-labelledby="attachmentModal" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <h2 class="title mt-2 mb-3">{{ t('evidence.title') }}</h2>
                <button 
                    id="btnCloseAttachmentModal" 
                    type="button" 
                    class="close bg-white" 
                    data-dismiss="modal" 
                    @click="clearLoad"
                    aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <Spiner v-if="loading"/>
                <div v-else>
                    <div v-if="!attachments || attachments.total == 0" class="card-body">
                        <p class="empty">{{ t('evidence.empty') }}</p>
                    </div>
                    <div  v-else class="card-body box-attachments">
                        <div class="attachment" v-for="data in attachments.data">
                            <p v-if="data.type == 'Loading'">{{ t('evidence.loadEvidence') }}</p>
                            <p v-else>{{ t('evidence.downloadEvidence') }}</p>
                            <img 
                                :src="`${baseUrl}/v1/public-load-attachments/download/${data._id}`" 
                                :alt="data.type"
                            />
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button 
                    type="button" 
                    class="btn btn-dark" 
                    @click="clearLoad"
                    data-dismiss="modal">{{ t('buttons.close') }}</button>
            </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
    .box-attachments {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }
    .attachment {
        width: 45%;
        display: flex;
        flex-direction: column;
        padding: 16px;
        margin-bottom: 20px;
        border-radius: 13px;
        align-content: center;
        align-items: center;
        box-shadow: 3px 5px 10px 5px rgba(0,0,0,0.10);
        -webkit-box-shadow: 3px 5px 10px 5px rgba(0,0,0,0.10);
        -moz-box-shadow: 3px 5px 10px 5px rgba(0,0,0,0.10);

    }

    .attachment p {
        font-size: 1rem;
        font-weight: 900;
        color: black;
    }

    .attachment img {
        width: 100%;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        align-content: center;
    }

    @media (max-width: 568px) {
        .attachment {
            width: 90%;
            display: flex;
            flex-direction: column;
            padding: 16px;
            margin-bottom: 20px;
            border-radius: 13px;
            align-content: center;
            align-items: center;
            box-shadow: 3px 5px 10px 5px rgba(0,0,0,0.10);
            -webkit-box-shadow: 3px 5px 10px 5px rgba(0,0,0,0.10);
            -moz-box-shadow: 3px 5px 10px 5px rgba(0,0,0,0.10);

        }
        
    }
</style>