window.addEventListener("load", solve);

function solve() {
    const expenseTypeField = document.getElementById('expense');
    const amountField = document.getElementById('amount');
    const dateField = document.getElementById('date');
    const addBtn = document.getElementById('add-btn');
    const previewArea = document.getElementById('preview-list');
    const expensesList = document.getElementById('expenses-list');
    const deleteBtn = document.getElementsByClassName('delete')[0];

    deleteBtn.addEventListener('click', () => {
        location.reload();
    })

    addBtn.addEventListener('click', () => {
        let validData = expenseTypeField.value !== '' && amountField.value !== '' && dateField.value !== '';

        let typeExpense = expenseTypeField.value;
        let amountVal = amountField.value;
        let dateVal = dateField.value;

        if (validData) {

        let liElement = document.createElement('li');
        liElement.classList = 'expense-item';

        let articleElement = document.createElement('article');

        let typeParagraph = document.createElement('p');
        typeParagraph.textContent = `Type: ${expenseTypeField.value}`;

        let amountParagraph = document.createElement('p');
        amountParagraph.textContent = `Amount: ${amountField.value}`;

        let dateParagraph = document.createElement('p');
        dateParagraph.textContent = `Date: ${dateField.value}`;

        let buttonsContainer = document.createElement('div');
        buttonsContainer.classList = 'buttons';

        let editBtn = document.createElement('button');
        editBtn.textContent = 'edit';
        editBtn.classList = 'btn edit';
        editBtn.addEventListener('click', editData);

        let okBtn = document.createElement('button');
        okBtn.textContent = 'ok';
        okBtn.classList = 'btn ok';
        okBtn.addEventListener('click', postData);

        articleElement.appendChild(typeParagraph);
        articleElement.appendChild(amountParagraph);
        articleElement.appendChild(dateParagraph);

        liElement.appendChild(articleElement);

        buttonsContainer.appendChild(editBtn);
        buttonsContainer.appendChild(okBtn);

        liElement.appendChild(buttonsContainer);

        previewArea.appendChild(liElement);

        expenseTypeField.value = '';
        amountField.value = '';
        dateField.value = '';
        addBtn.disabled = true;

        function editData() {
            addBtn.disabled = false;
            expenseTypeField.value = typeExpense;
            amountField.value = amountVal;
            dateField.value = dateVal;

            previewArea.removeChild(liElement);
        }

        function postData() {
            previewArea.removeChild(liElement);
            liElement.removeChild(buttonsContainer);
            expensesList.appendChild(liElement);
            addBtn.disabled = false;
        }
    }
    })

}