02.EcoEvent

window.addEventListener("load", solve);

function solve() {
    let nextBtn = document.getElementById('next-btn');
    let previewList = document.getElementById('preview-list');
    let eventList = document.getElementById('event-list');
    let emailField = document.getElementById('email');
    let eventField = document.getElementById('event');
    let locationField = document.getElementById('location');

    nextBtn.addEventListener('click', function (e) {
        e.preventDefault();
        addEventToPreview();
    })

    function addEventToPreview () {

        if (!emailField.value || !eventField.value || !locationField.value) {
            return;
        }

        let eventItem = document.createElement('li');
        eventItem.classList.add('application');
        let eventArticle = document.createElement('article');

        let eventEmail = document.createElement('h4');
        eventEmail.textContent = emailField.value;
        eventArticle.appendChild(eventEmail);

        let eventPara = document.createElement('p');
        let paraTitle = document.createElement('strong');
        paraTitle.textContent = 'Event:';
        let eventBreak = document.createElement('br');
        eventPara.appendChild(paraTitle);
        eventPara.appendChild(eventBreak);
        eventPara.append(eventField.value);
        eventArticle.appendChild(eventPara);

        let locationPara = document.createElement('p');
        let paraTitleLoc = document.createElement('strong');
        paraTitleLoc.textContent = 'Location:';
        let eventBreakLoc = document.createElement('br');
        locationPara.appendChild(paraTitleLoc);
        locationPara.appendChild(eventBreakLoc);
        locationPara.append(locationField.value);
        eventArticle.appendChild(locationPara);

        eventItem.appendChild(eventArticle);

        let editBtn = document.createElement('button');
        editBtn.classList.add('action-btn');
        editBtn.classList.add('edit');
        editBtn.textContent = 'edit';
        editBtn.addEventListener('click', editEvent);
        eventItem.appendChild(editBtn);

        let applyBtn = document.createElement('button');
        applyBtn.classList.add('action-btn');
        applyBtn.classList.add('apply');
        applyBtn.textContent = 'apply';
        applyBtn.addEventListener('click', applyEvent);
        eventItem.appendChild(applyBtn);

        previewList.appendChild(eventItem);

        nextBtn.disabled = true;
        emailField.value = '';
        eventField.value = '';
        locationField.value = '';
    }

    function editEvent (event) {
        let editEventLi = event.currentTarget.parentElement;
        let editEmail = editEventLi.querySelector('article h4').textContent;
        let editEvent = editEventLi.querySelector('article p:first-of-type').textContent.split(':')[1];
        let editLocation = editEventLi.querySelector('article p:last-of-type').textContent.split(':')[1];

        emailField.value = editEmail;
        eventField.value = editEvent;
        locationField.value = editLocation;
        nextBtn.disabled = false;

        previewList.removeChild(editEventLi);
    }

    function applyEvent (event) {
        let applyEventLi = event.currentTarget.parentElement;
        let buttons = applyEventLi.querySelectorAll('button');

        for (let btn of buttons) {
            applyEventLi.removeChild(btn);
        }

        previewList.removeChild(applyEventLi);
        eventList.appendChild(applyEventLi);
    }
}