const fileInput = document.getElementById('fileInput');
const selectedFilesDiv = document.getElementById('selectedFiles');

let repeatedList = []
fileInput.addEventListener('change', function () {
 
  populateFileTable(Array.from(fileInput.files));
  console.log('fileInput.files on change', fileInput.files); getFileListFromServer(fileInput.files);
});

async function getFileListFromServer(fileInput) {

  const fileUpload = document.getElementById('fileUpload');
fileUpload.style.color = 'white';

  await fetch('/getfilenames')
      .then(response => response.json())
      .then(data => {
          // Call populateFileTable() with the retrieved file list
          compareFilelist(fileInput , data);
      })
      .catch(error => console.error('Error getting file list from server:', error));
}
function compareFilelist(fileInput , data) {
  // console.log("resultes :");
  console.log(fileInput);
  // console.log(data);  //array

  Array.from(fileInput).forEach(selectedfile => { 
    console.log(selectedfile.name);
    data.forEach(filename => {
       if (filename === selectedfile.name){
        const repeatedFileName = selectedfile.name
        console.log( repeatedFileName, 'is repeated ');
        repeatedList.push(repeatedFileName);

        Array.from(selectedFilesDiv.children[0].rows).forEach((row, index) => {
          const fileNameCell = row.cells[0];
          const fileStateCell = row.cells[2];
      
          const fileName = fileNameCell.textContent;
          if (fileName == repeatedFileName) {
            row.style.backgroundColor = 'rgb(254 255 82)';
                fileStateCell.innerText = 'Repeated file!';
          }
        });

       } // repeat function
    });

  });


}


async function handleFormSubmit(event) {
  event.preventDefault();

  const getFileStateBtn = document.getElementById('getFileStateBtn');
getFileStateBtn.disabled = false;

const fileUpload = document.getElementById('fileUpload');
fileUpload.style.color = 'grey';

  const formData = new FormData(this);

  // Get the file input element
  const fileInput = document.getElementById('fileInput');
  const fileList = fileInput.files;

 

  // Filter out files based on repeatedList before upload
  const filteredFiles = Array.from(fileList).filter(file => {
    return !repeatedList.includes(file.name);
  });

  if (filteredFiles.length > 0) {

  // Replace the original files with the modified file list
  formData.delete('uploaded'); // Delete the existing files
  filteredFiles.forEach(file => formData.append('uploaded', file)); // Add modified files

  
  try {
    const response = await fetch('/upload', {
      method: 'POST',
      body: formData
    });

    // Handle response as needed
 

  const data = await response.json();
  console.log(data);
  const fileStates = data.states;
  const filelist = data.files;
  const fileErrors = data.errors;

  const resultDiv = document.getElementById('result');
  // createTable(resultDiv, data.files);


  Array.from(selectedFilesDiv.children[0].rows).forEach((row, index) => {
    const fileNameCell = row.cells[0];
    const fileSizeCell = row.cells[1];
    const fileStateCell = row.cells[2];

    const fileName = fileNameCell.textContent;
    const fileSize = fileSizeCell.textContent;

    filelist.forEach(element => {
      if (element.originalFilename === fileName) {
        console.log('found file name similar');
        console.log('element.size', element.size);
        console.log('fileName', fileSize);

        if (element.size == fileSize) {
          row.style.fontWeight = 'bold';
          row.style.backgroundImage = 'radial-gradient(farthest-corner at 50% 50%, skyblue, transparent)';
          fileStateCell.innerText = 'uploaded';
        } else {
          row.style.backgroundColor = 'pink';
          fileStateCell.innerText = 'error upload';

        }
      }

    });
    // const fileState = filelist.find(file => file.originalFilename === fileName);
    // if (fileState) {
    //   fileSizeCell.textContent = fileState.size;
    //   if (fileState.size === 'Bad') {
    //     row.style.backgroundColor = 'red';
    //   } else {
    //     row.style.backgroundColor = 'transparent';
    //   }
    // }

  });

}   catch (error) {
  console.error('Error uploading files:', error);
  // Handle errors during upload
  alert('Error uploading files:', error);
}
} else {
  console.log("No valid files selected for upload.");
  alert('Допустимые файлы не выбраны или уже загружены.');
}


}



// Function to populate the file table with selected files
function populateFileTable(fileList) {
  const table = document.createElement('table');

  const headerRow = table.insertRow();
  // headerRow.style.background = '#121212';
  headerRow.style.background = ' linear-gradient(90deg, rgba(28,28,28,0.8379726890756303) 0%, rgba(24,23,23,0.9556197478991597) 51%, rgba(29,29,29,0.8715861344537815) 100%)';
  headerRow.style.color = 'white';
  const filenameHeader = headerRow.insertCell();
  filenameHeader.textContent = 'Filename';
  const sizeHeader = headerRow.insertCell();
  sizeHeader.textContent = 'Size';
  const stateHeader = headerRow.insertCell();
  stateHeader.textContent = 'State';


  fileList.forEach(fileData => {
    const row = table.insertRow();
    const filenameCell = row.insertCell();
    if (fileData.originalFilename) {
      filenameCell.textContent = fileData.originalFilename;
    } else if (fileData.name) {
      filenameCell.textContent = fileData.name;
    }

    const sizeCell = row.insertCell();
    sizeCell.textContent = fileData.size;
    const stateCell = row.insertCell();
    stateCell.textContent = '---';
  });

  // Replace the existing content with the new table
  selectedFilesDiv.innerHTML = '';
  selectedFilesDiv.appendChild(table);
}

 

document.querySelector('form').addEventListener('submit', handleFormSubmit);

document.getElementById("getFileStateBtn").addEventListener("click", async function () {
  
  const getFileStateBtn = document.getElementById('getFileStateBtn');
  getFileStateBtn.disabled = true; // Disable the button
  const fileUpload = document.getElementById('fileUpload');
fileUpload.style.color = 'white';

  const response = await fetch('/getState');
  const data = await response.json();
  console.log(data);
  // const stateDiv = document.getElementById('state');
  // createTable(stateDiv, data.states);

  const fileStates = data.states;
  const fileErrors = data.errors;

  // const resultDiv = document.getElementById('result');
  // createTable(resultDiv, data.files);


  Array.from(selectedFilesDiv.children[0].rows).forEach((row, index) => {
    const fileNameCell = row.cells[0];
    const fileSizeCell = row.cells[1];
    const fileStateCell = row.cells[2];

    const fileName = fileNameCell.textContent;

    const fileState = fileStates.find(file => file.name === fileName);
    if (fileState) {
      fileStateCell.innerText = fileState.size;
      if (fileState.size === 'Bad') {
        row.style.backgroundImage = 'radial-gradient(farthest-corner at 50% 50%, orangered, transparent)';
      } else {
        row.style.backgroundImage = 'radial-gradient(farthest-corner at 50% 50%, lightgreen, transparent)';
      }
    }

  });

});


const dropZone = document.getElementById('dropZone');

// Prevent default behavior for drag events
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
  dropZone.addEventListener(eventName, preventDefault, false);
});

function preventDefault(event) {
  event.preventDefault();
  event.stopPropagation();
}

// Handle file drop event
dropZone.addEventListener('drop', handleDrop, false);

function handleDrop(event) {
  event.preventDefault();
  event.stopPropagation();

  const fileList = event.dataTransfer.files;
  
  // const repeatedList = ['avoid_uploading_this_file.txt', 'another_filename_to_avoid.txt']; // Example repeatedList

  // Filter out files based on repeatedList before upload
  const filteredFiles = Array.from(fileList).filter(file => {
    return !repeatedList.includes(file.name);
  });

  // Replace the original files with the modified file list
  const formData = new FormData();
  filteredFiles.forEach(file => formData.append('uploaded', file)); // Add modified files

  // Update the file input field with dropped files
  const fileInput = document.getElementById('fileInput');
  fileInput.files = fileList;

  // Submit the form or call handleFormSubmit function here with formData

  populateFileTable(Array.from(fileInput.files));
  console.log('dragdrop', fileInput.files); 
  getFileListFromServer(fileInput.files);

}

// Allow users to trigger file selection by clicking the drop zone
dropZone.addEventListener('click', () => {
  const fileInput = document.getElementById('fileInput');
  fileInput.click();
});