// Class of object, format, TASK
class Task {
    constructor(title, description, hour) {
        this.title = title;
        this.description = description;
        this.hour = hour;
    }
}



// UI constructor class // action according to event

class UI {
    addTask(task) {
        const taskList = document.getElementById('task-list');
        const newItem = document.createElement('div');
        newItem.innerHTML = `
       <div class="card text-center mb-4 card-body">
            <strong>Title:</strong> ${task.title}
            <strong>Description:</strong> ${task.description}
            <strong>Hour:</strong> ${task.hour}
            <a href="#" class="btn btn-danger" name="delete">Delete</a>   
       </div>
       `;
        taskList.appendChild(newItem);
    }

    resetForm() {
        document.getElementById('task-form').reset();
    }
    editTask() {

    }
    removeTask(element) {
        if (element.name == 'delete') {
            element.parentElement.remove();
            this.showMessage('Task deleted', 'danger')
        }
    }

    showMessage(message, cssClass) {
        /*const divm = document.createElement('div');
        //div.className = `alert alert-${cssClass}`;
        div.className = 'alert alert-' + cssClass;
        div.appendChild(document.createTextNode(message));
        //Showing in DOM 
        const container = document.querySelector('.container');
        const app = document.querySelector('#App');
        // Insert div Message in the UI
        document.insertBefore(div, app);*/
        const div = document.createElement('div');
        div.className = `alert alert-${cssClass}`;
        div.appendChild(document.createTextNode(message));
        // Show in The DOM
        const container = document.querySelector('.container');
        const app = document.querySelector('#App');
        // Insert Message in the UI
        container.insertBefore(div, app);
        // Remove the Message after 3 seconds
        setTimeout(function () {
            document.querySelector('.alert').remove();
        }, 3000);
    }
}


// DOM Events // elements task-form and task-list
document.getElementById('task-form')
    .addEventListener('submit', function (e) {
        const title = document.getElementById('title').value;
        const description = document.getElementById('description').value;
        const hour = document.getElementById('hour').value;
        // New object task
        const task = new Task(title, description, hour);
        //New UI
        const ui = new UI();

        if(title === '' || description === '' || hour === ''){
            return ui.showMessage('Complete fields, please', 'info');
        }
        ui.addTask(task);
        ui.resetForm();
        ui.showMessage('Task added', 'success');
        //console.log(title, description, hour);

        e.preventDefault();
    });


document.getElementById('task-list').addEventListener('click', function (e) {
    const ui = new UI();
    ui.removeTask(e.target);
    e.preventDefault();
});