// /* ==========================================================================
//    FileUpload handler
//    - Handles the FileUpload component which has the proper classes.
//    - Can only be used in conjunction with ChocolateFactory which handles the post.
//  ========================================================================== */
//
// const FileUploadHandler = {
//   fileUploadWrapperClass: '.js-file-upload',
//   fileUploadListClass: '.js-file-upload__list',
//   fileUploadInputClass: '.js-file-upload__input',
//   fileUploadButtonClass: '.js-file-upload__button',
//
//   init: function () {
//
//     const fileUploads = document.querySelectorAll(FileUploadHandler.fileUploadWrapperClass);
//     const fileUploadsCount = fileUploads.length;
//
//     if(isset(fileUploads) && fileUploadsCount !== 0){
//       for(let i = 0; i < fileUploadsCount; i++){
//         const fileUpload = fileUploads[i];
//         this.initFileUploadHandler(fileUpload);
//       }
//     }
//   },
//
//   addFile: function (inputElement) {
//     if(!inputElement) return;
//
//     const node = inputElement.cloneNode();
//     const list = inputElement.parentNode.parentNode.querySelector(FileUploadHandler.fileUploadListClass);
//     let li = document.createElement('li');
//     let remove = document.createElement('button');
//     let textNode = document.createTextNode(inputElement.value.split("\\")[inputElement.value.split('\\').length - 1]);
//
//     node.value = "";
//     node.addEventListener('change', this.eventHandler);
//
//     remove.setAttribute('type', 'button');
//     remove.addEventListener('click', this.eventHandler);
//
//     inputElement.parentNode.appendChild(node);
//     inputElement.style.display = 'none';
//
//     li.appendChild(inputElement);
//     li.appendChild(textNode);
//     li.appendChild(remove);
//
//     list.appendChild(li);
//   },
//
//   removeFile: function (event) {
//     event.target.parentNode.parentNode.removeChild(event.target.parentNode);
//   },
//
//   eventHandler: function (event) {
//     switch (event.type) {
//       case 'click':
//         if (event.currentTarget.classList.contains(FileUploadHandler.fileUploadButtonClass.substring(1))) {
//           event.currentTarget.parentNode.querySelector(FileUploadHandler.fileUploadInputClass).click();
//         }
//         else {
//           FileUploadHandler.removeFile(event);
//         }
//
//         break;
//       case 'change':
//         FileUploadHandler.addFile(event.target);
//         break;
//     }
//   },
//
//   initFileUploadHandler: function (fileUpload) {
//     const inputElement = fileUpload.querySelector(FileUploadHandler.fileUploadInputClass);
//     const inputButtonElement = fileUpload.querySelector(FileUploadHandler.fileUploadButtonClass);
//     inputButtonElement.addEventListener('click', this.eventHandler);
//     inputElement.addEventListener('change', this.eventHandler);
//   },
//
//
// };
//
// FileUploadHandler.init();


/* ==========================================================================
   FileUpload handler - FIXED VERSION
   - Handles the FileUpload component which has the proper classes.
   - Can only be used in conjunction with ChocolateFactory which handles the post.
 ========================================================================== */

// Helper function to check if variable exists (assuming this was missing)
function isset(variable) {
  return variable !== undefined && variable !== null;
}

const FileUploadHandler = {
  fileUploadWrapperClass: '.js-file-upload',
  fileUploadListClass: '.js-file-upload__list',
  fileUploadInputClass: '.js-file-upload__input',
  fileUploadButtonClass: '.js-file-upload__button',

  init: function () {
    const fileUploads = document.querySelectorAll(FileUploadHandler.fileUploadWrapperClass);
    const fileUploadsCount = fileUploads.length;

    if(isset(fileUploads) && fileUploadsCount !== 0){
      for(let i = 0; i < fileUploadsCount; i++){
        const fileUpload = fileUploads[i];
        this.initFileUploadHandler(fileUpload);
      }
    }
  },

  addFiles: function (inputElement) {
    if(!inputElement || !inputElement.files) return;

    const list = inputElement.closest(FileUploadHandler.fileUploadWrapperClass)
        .querySelector(FileUploadHandler.fileUploadListClass);

    // Handle multiple files
    Array.from(inputElement.files).forEach(file => {
      this.addSingleFile(file, inputElement, list);
    });

    // Create new input for additional files
    this.createNewInput(inputElement);
  },

  addSingleFile: function(file, originalInput, list) {
    const li = document.createElement('li');
    const fileName = document.createElement('span');
    const removeBtn = document.createElement('button');

    // Clone the original input and set its files
    const hiddenInput = originalInput.cloneNode();
    const dt = new DataTransfer();
    dt.items.add(file);
    hiddenInput.files = dt.files;
    hiddenInput.style.display = 'none';

    fileName.textContent = file.name;
    fileName.className = 'file-name';

    removeBtn.textContent = '×';
    removeBtn.type = 'button';
    removeBtn.className = 'remove-file-btn';
    removeBtn.addEventListener('click', (e) => {
      e.preventDefault();
      this.removeFile(e);
    });

    li.appendChild(hiddenInput);
    li.appendChild(fileName);
    li.appendChild(removeBtn);
    list.appendChild(li);
  },

  createNewInput: function(originalInput) {
    const newInput = originalInput.cloneNode();
    newInput.value = '';
    newInput.addEventListener('change', this.eventHandler.bind(this));

    // Replace the original input
    originalInput.parentNode.replaceChild(newInput, originalInput);
  },

  removeFile: function (event) {
    const listItem = event.target.parentNode;
    listItem.parentNode.removeChild(listItem);
  },

  eventHandler: function (event) {
    switch (event.type) {
      case 'click':
        if (event.currentTarget.classList.contains(FileUploadHandler.fileUploadButtonClass.substring(1))) {
          event.preventDefault();
          const fileInput = event.currentTarget.parentNode.querySelector(FileUploadHandler.fileUploadInputClass);
          fileInput.click();
        }
        break;

      case 'change':
        this.addFiles(event.target);
        break;
    }
  },

  initFileUploadHandler: function (fileUpload) {
    const inputElement = fileUpload.querySelector(FileUploadHandler.fileUploadInputClass);
    const inputButtonElement = fileUpload.querySelector(FileUploadHandler.fileUploadButtonClass);

    inputButtonElement.addEventListener('click', this.eventHandler.bind(this));
    inputElement.addEventListener('change', this.eventHandler.bind(this));
  }
};

// Initialize when DOM is ready
document.addEventListener('DOMContentLoaded', function() {
  FileUploadHandler.init();
});