export function addClass() {
const input_class = document.querySelector('.add-category input.div-wrapper');

let existingClasses;

const input_project_name = document.getElementById('project_name_input')
const description = document.getElementById('project_description_input');
const button_addClass = document.querySelector('.add-category .upload-button-text-wrapper');
const button_addProject = document.querySelector('.popup .confirm-button-datasetcreation')
const classWrapper = document.querySelector('.add-class-wrapper');


button_addProject.addEventListener('click', () => {
  const title = input_project_name.value.trim();
  const descriptionText = description.value.trim();
  const classes = Array.from(classWrapper.querySelectorAll('.overlap-group')).map(el => el.textContent.trim());

  const formData = new FormData();
  formData.append('title', title);
  formData.append('description', descriptionText);
  formData.append('classes', JSON.stringify(classes));
  if (imgBlob) {
    formData.append('project_image', imgBlob, 'project_image.png'); // or the correct file type
  }

  fetch('/api/training-projects', {
    method: 'POST',
    body: formData
  })
  .then(res => res.json())
  .then(data => {
    alert(data.message || 'Project created!');
    window.location.href = '/index.html';
  })
  .catch(err => alert('Error: ' + err));
});
  

  button_addClass.addEventListener('click', () => {

    const className = input_class.value.trim();
    
    if (!className) {
      alert('Please enter a class name');
      return;
    }


    existingClasses = classWrapper.querySelectorAll('.overlap-group');
    for (const el of existingClasses) {
      if (el.textContent.trim().toLowerCase() === className.toLowerCase()) {
        alert(`Class name "${className}" already exists.`);
        return;
      }
    }
    
 
    const newClassDiv = document.createElement('div');
    newClassDiv.classList.add('add-class');
    newClassDiv.style.position = 'relative';
    newClassDiv.style.width = '335px';
    newClassDiv.style.height = '25px';
    newClassDiv.style.marginBottom = '5px';


    const overlapGroup = document.createElement('div');
    overlapGroup.classList.add('overlap-group');
    overlapGroup.style.position = 'absolute';
    overlapGroup.style.width = '275px';
    overlapGroup.style.height = '25px';
    overlapGroup.style.top = '0';
    overlapGroup.style.left = '0';
    overlapGroup.style.backgroundColor = '#30bffc80';
    overlapGroup.style.borderRadius = '5px';
    overlapGroup.style.display = 'flex';
    overlapGroup.style.alignItems = 'center';
    overlapGroup.style.paddingLeft = '10px';
    overlapGroup.style.color = '#000';
    overlapGroup.style.fontFamily = 'var(--m3-body-small-font-family)';
    overlapGroup.style.fontWeight = 'var(--m3-body-small-font-weight)';
    overlapGroup.style.fontSize = 'var(--m3-body-small-font-size)';
    overlapGroup.style.letterSpacing = 'var(--m3-body-small-letter-spacing)';
    overlapGroup.style.lineHeight = 'var(--m3-body-small-line-height)';
    overlapGroup.textContent = className;


    const overlap = document.createElement('div');
    overlap.classList.add('overlap');
    overlap.style.position = 'absolute';
    overlap.style.width = '50px';
    overlap.style.height = '25px';
    overlap.style.top = '0';
    overlap.style.left = '285px';

 
    const rectangle = document.createElement('div');
    rectangle.classList.add('rectangle');
    rectangle.style.width = '50px';
    rectangle.style.height = '25px';
    rectangle.style.backgroundColor = '#ff0f43';
    rectangle.style.borderRadius = '5px';
    rectangle.style.display = 'flex';
    rectangle.style.alignItems = 'center';
    rectangle.style.justifyContent = 'center';
    rectangle.style.cursor = 'pointer';

    rectangle.addEventListener('mouseenter', () => {
      rectangle.style.backgroundColor = '#bb032b';
    });
    rectangle.addEventListener('mouseleave', () => {
      rectangle.style.backgroundColor = '#ff0f43';
    });


    const minusText = document.createElement('div');
    minusText.classList.add('text-wrapper-4');
    minusText.style.position = 'absolute';
    minusText.style.top = '-18px';
    minusText.style.left = '18px';
    minusText.style.fontFamily = 'var(--m3-display-large-font-family)';
    minusText.style.fontWeight = 'var(--m3-display-large-font-weight)';
    minusText.style.color = '#000000';
    minusText.style.fontSize = 'var(--minus-for-button-size)';
    minusText.style.letterSpacing = 'var(--m3-display-large-letter-spacing)';
    minusText.style.lineHeight = 'var(--m3-display-large-line-height)';
    minusText.style.whiteSpace = 'nowrap';
    minusText.style.cursor = 'pointer';
    minusText.style.fontStyle = 'var(--m3-display-large-font-style)';
    minusText.textContent = '_';


    rectangle.appendChild(minusText);


    rectangle.addEventListener('click', () => {
      classWrapper.removeChild(newClassDiv);

      document.dispatchEvent(new CustomEvent('classListUpdated'));
    });

   
    overlap.appendChild(rectangle);


    newClassDiv.appendChild(overlapGroup);
    newClassDiv.appendChild(overlap);


    classWrapper.appendChild(newClassDiv);


    input_class.value = '';
  });
}