const items = document.querySelectorAll('.item');
let placeholders = [...document.getElementsByClassName('placeholder')];
const body = document.getElementsByTagName('body');
// let arr = [...placeholders];

console.log(placeholders)

items.forEach(item=>{
    item.draggable = true;
    item.addEventListener('dragstart',dragstart);
    item.addEventListener('dragend',dragend);
  })

for (const placeholder of placeholders) {
    placeholder.addEventListener('dragover', dragover);
    placeholder.addEventListener('dragenter', dragenter);
    placeholder.addEventListener('dragleave', dragleave);
    placeholder.addEventListener('drop', dragdrop);
  }

function dragstart(event) {
    event.target.classList.add('hold');
    setTimeout(() => event.target.classList.add('hide'), 0);
    // console.log(Element.closest('.closed'))
    let id = String(event.target.id)
    const parent = document.getElementById(id)
    console.log(parent)
}

function dragend(event) {
    event.target.classList.remove('hold', 'hide');
    // console.log(event.target.classList)
}

function dragover(event) {
    if (![...event.target.classList].includes('closed') &&
    [...event.target.classList].includes('placeholder')) {
        event.preventDefault();
    }
    console.log(event.length)
}

function dragenter(event) {
    if (![...event.target.classList].includes('closed') &&
    [...event.target.classList].includes('placeholder')) {
        event.target.classList.add('hovered');
    }
}

function dragleave(event) {
    event.target.classList.remove('hovered');
    // event.target.classList.remove('closed');
}

function dragdrop(event) {
    const hold = document.querySelector('.hold')
    event.target.append(hold);
    event.target.classList.remove('hovered');
    event.target.classList.add('closed');
    hold.className = 'item';

    console.log([...event.target.classList].includes('closed'));
    // closePlaceHolder(hold)
}

function closePlaceHolder(placeholder) {
    console.log(placeholder)
    const index = placeholders.indexOf(placeholder);
    placeholders.splice(index, 1);
    console.log(placeholders);
}