const dropArea = document.getElementById('drop-area');
const fileInput = document.getElementById('file-input');
const fileList = document.getElementById('file-list');
const clearButton = document.getElementById('clear-button');        
let droppedFiles = [];

// Function to display the list of selected or dropped files
function displayFileList(files) {
    fileList.innerHTML = '';  // Clear previous file list
    for (let i = 0; i < files.length; i++) {
        const file = files[i];
        const listItem = document.createElement('div');
        listItem.textContent = file.name;
        fileList.appendChild(listItem);
        fileInput.value
    }
}

// Function to add files to the file input element
function addFilesToFileInput(files) {
    for (let i = 0; i < files.length; i++) {
        droppedFiles.push(files[i]);
    }
    // Create a new FileList (simulate it for the file input)
    const dataTransfer = new DataTransfer();
    droppedFiles.forEach(file => dataTransfer.items.add(file));
    fileInput.files = dataTransfer.files; // Set new files to the file input
}

// Add file input menu on click
dropArea.addEventListener('click', () => {
    fileInput.click();
});

// Show file list when files are selected via input
fileInput.addEventListener('change', (e) => {
    displayFileList(e.target.files);
});        

// Handle dropped files
dropArea.addEventListener('drop', (e) => {
    e.preventDefault();
    addFilesToFileInput(e.dataTransfer.files); // Add dropped files to input
    displayFileList(e.dataTransfer.files);
});        

// Handle clear button
clearButton.addEventListener('click', () => {
    fileList.innerHTML = '';  // Clear the list of files
    droppedFiles = [];        // Reset the dropped files array
    fileInput.value = '';     // Reset the file input element
});  

// Prevent default behavior for drag-and-drop
['dragenter', 'dragover'].forEach(event => {
    dropArea.addEventListener(event, (e) => {
        e.preventDefault();
        dropArea.classList.add('hover');
    });
});
// Prevent default behavior for drag-and-drop
['dragleave', 'drop'].forEach(event => {
    dropArea.addEventListener(event, (e) => {
        e.preventDefault();
        dropArea.classList.remove('hover');
    });
});