export class Playlist {
    constructor() {
        this._tracks = [];
    }

    get tracks() {
        return this._tracks;
    }

    addTrack(track) {
        this._tracks.push(track);

        const div = document.createElement('div');

        div.classList.add('d-flex');
        div.classList.add('align-items-center');
        div.classList.add('justify-content-between');

        const deleteBtn = document.createElement('button');
        deleteBtn.innerHTML = `<i class="bi bi-trash"></i>`;
        deleteBtn.classList.add("btn");
        deleteBtn.classList.add("btn-danger");
        deleteBtn.classList.add("col-md-1");
        deleteBtn.style.marginRight = "10px";
        deleteBtn.addEventListener('click', (e) => {
            e.preventDefault();
            this._tracks.splice(this._tracks.indexOf(track), 1);
            div.remove();
        });
        div.appendChild(deleteBtn);
        const li = document.createElement('li');
        li.classList.add("card");
        li.classList.add("shadow-sm");
        li.classList.add("p-4");
        li.classList.add("col-md-11");
        li.textContent = track.name;
        li.style.margin = "5px 0";

        div.appendChild(li);

        div.setAttribute('id', this._tracks.indexOf(track).toString());
        div.setAttribute('draggable', 'true');

        div.addEventListener('dragstart', (e) => {
            e.dataTransfer.setData('text/plain', e.target.id);
        });

        return div;
    }
}