<label class="rich-input__label mt-5">
    {{ attachment_label ?? 'Přiložit foto prostoru, který chcete zastínit'|trans }}
</label>
<div class="file-uploader">
    <label class="file-uploader-box">
        {{ form_widget(attachment, {'attr': {'class': 'input-file', 'accept': '.jpg,.jpeg,.png', 'multiple': 'multiple'}}) }}
        <svg class="file-uploader-box__icon">
            <use href="build/svg/_icons.svg#picture"></use>
        </svg>
        <div class="file-uploader-box-text">
            <p class="file-uploader-box-text__heading">{% trans %}Nahrát obrázek{% endtrans %}</p>
{#            <p class="text-small">Přílohy musí mít maximálně 5 MB (celkově), formáty: jpg, jpeg, png. Pokud tyto podmínky nejsou#}
{#                splněny, pošlete prosím e-mail na info@proklima.cz</p>            #}
            <p class="text-small">
                {{ attachment_description|default('Přílohy musí mít maximálně 5 MB (celkově), formáty: jpg, jpeg, png. Pokud tyto podmínky nejsou splněny, pošlete prosím e-mail na info@proklima.cz'|trans)}}
            </p>
        </div>
        <div class="button button--primary">{% trans %}Vybrat soubor{% endtrans %}</div>
    </label>
    <div class="flash flash--error" style="display: none;">
        {% trans %}Vybraný soubor je příliš velký (celkově) nebo není ve správném formátu.{% endtrans %}
    </div>
    <ul class="uploaded-files"></ul>
</div>

<script>
    document.querySelectorAll('.file-uploader').forEach(function (fileUploader) {
        const inputFile = fileUploader.querySelector('.input-file');
        const errorFlash = fileUploader.querySelector('.flash--error');
        const uploadedFilesList = fileUploader.querySelector('.uploaded-files');

        // Each file-uploader has a total max size of 5 MB
        const maxTotalSize = 5 * 1024 * 1024; // 5 MB
        const allowedFormats = ['image/jpeg', 'image/png', 'image/jpg'];

        // Prevent re-initialization
        if (fileUploader.dataset.initialized) {
            return;
        }
        fileUploader.dataset.initialized = 'true';

        // DataTransfer for storing selected files
        const dataTransfer = new DataTransfer();

        inputFile.addEventListener('change', handleFileSelect);

        function handleFileSelect(event) {
            const files = event.target.files;
            errorFlash.style.display = 'none';

            for (const file of files) {
                // Check for duplicates
                if (isFileDuplicate(file)) {
                    continue;
                }

                // Check format + total size constraints
                if (!allowedFormats.includes(file.type)) {
                    // Wrong format => skip
                    errorFlash.style.display = 'block';
                    continue;
                }

                // If adding this file would exceed 5 MB total
                if (getTotalSize() + file.size > maxTotalSize) {
                    errorFlash.style.display = 'block';
                    continue;
                }

                // Otherwise, file is OK => add to DataTransfer
                dataTransfer.items.add(file);
                displayFile(file);
            }

            // Update the actual input's files
            inputFile.files = dataTransfer.files;
        }

        // Checks if a file with same name and size is already in DataTransfer
        function isFileDuplicate(file) {
            for (const item of dataTransfer.items) {
                const existingFile = item.getAsFile();
                if (existingFile && existingFile.name === file.name && existingFile.size === file.size) {
                    return true;
                }
            }
            return false;
        }

        // Returns total size of files currently stored in DataTransfer
        function getTotalSize() {
            let total = 0;
            for (const item of dataTransfer.items) {
                const existingFile = item.getAsFile();
                total += existingFile.size;
            }
            return total;
        }

        // Render file in the list and add remove functionality
        function displayFile(file) {
            const fileItem = document.createElement('li');
            fileItem.classList.add('uploaded-files__item');

            const fileInfo = document.createElement('div');
            fileInfo.classList.add('uploaded-files__file-info');
            fileInfo.innerHTML = `
                <svg class="file-uploader-box__icon">
                  <use href="/build/svg/_icons.svg#picture"></use>
                </svg>
            `;

            const fileName = document.createTextNode(file.name);

            const removeButton = document.createElement('button');
            removeButton.classList.add('uploaded-files__file-remove');
            removeButton.type = 'button';
            removeButton.setAttribute('name', 'Odebrat soubor');
            removeButton.innerHTML = `
                <svg>
                  <use href="/build/svg/_icons.svg#close"></use>
                </svg>
            `;
            removeButton.addEventListener('click', () => {
                fileItem.remove();
                removeFile(file);
            });

            fileInfo.appendChild(fileName);
            fileItem.appendChild(fileInfo);
            fileItem.appendChild(removeButton);
            uploadedFilesList.appendChild(fileItem);
        }

        // Remove file from DataTransfer when user clicks 'remove'
        function removeFile(file) {
            const newDataTransfer = new DataTransfer();
            for (const item of dataTransfer.items) {
                if (item.getAsFile() !== file) {
                    newDataTransfer.items.add(item.getAsFile());
                }
            }
            // Clear old DataTransfer, re-populate
            dataTransfer.items.clear();
            for (const item of newDataTransfer.items) {
                dataTransfer.items.add(item.getAsFile());
            }
            // Update input files
            inputFile.files = dataTransfer.files;
        }
    });
</script>