script.js

const itemForm = document.getElementById('item-form');
const itemInput = document.getElementById('item-input');
const itemList = document.getElementById('item-list');
const clearBtn = document.getElementById('clear');
const itemFilter = document.getElementById('filter');
let isEditMode = false;
const formBtn = itemForm.querySelector('button');



function displayItems(){
   const itemFromStorage = getItemfromStorage();
   itemFromStorage.forEach((item) => addItemToDOM(item));
   checkUI();


}
function onAddItem(e){

    e.preventDefault();

    const newItem = itemInput.value;

    // Validate input

    if (newItem === '')
    {
        alert('Please add an item');
        return;
    }

    // Check for edit mode
    if (isEditMode){
        const itemToEdit = itemList.querySelector('.edit-mode');

        removeItemFromStorage(itemToEdit.textContent);
        itemToEdit.classList.remove('edit-mode');
        itemToEdit.remove();
        isEditMode = false;
    }else {
        if(checkIfItemExists(newItem)){
            alert('That item is already exists!');
            return;
        }
    }


    //Create item DOM element
    //addItemToDOM(newItem);

    //Add item to locaal storage
    addItemToStorage(newItem);

    //Create list item

    const li = document.createElement('li');
    li.appendChild(document.createTextNode(newItem));


    const button = createButton('remove-item btn-link text-red');
    li.appendChild(button);

    itemList.appendChild(li);

    checkUI();

    itemInput.value ='';

}

function addItemToDOM(item){
    const li = document.createElement('li');
    li.appendChild(document.createTextNode(item));


    const button = createButton('remove-item btn-link text-red');
    li.appendChild(button);

    itemList.appendChild(li);
}

function addItemToStorage(item){

    const itemFromStorage=getItemfromStorage();

    
     //add new item to array
    itemFromStorage.push(item);

    //Convert to JSON string and set to locl storage

    localStorage.setItem('items', JSON.stringify(itemFromStorage));

}

function getItemfromStorage(item){

    let itemFromStorage;
    if(localStorage.getItem('items') === null){
        itemFromStorage =[];

    }else{

        itemFromStorage =JSON.parse(localStorage.getItem('items'));
    }

    return itemFromStorage;
    
}

function createButton(classes){

    const button = document.createElement('button');
    button.className = classes;
    const icon =createIcon('fa-solid fa-xmark')
    button.appendChild(icon);
    return button;

}

function createIcon(classes)
{
    const icon = document.createElement('i');
    icon.className = classes;
    return icon;
}

function onClickItem(e) {
    if(e.target.parentElement.classList.contains('remove-item'))
    {
      removeItem(e.target.parentElement.parentElement);  
    }else{
        setItemToEdit(e.target);
    }

}function checkIfItemExists(item){
    const itemFromStorage = getItemfromStorage();
    return itemFromStorage.includes(item);
}

function setItemToEdit(item){

    isEditMode = true;
    itemList.querySelectorAll('li').forEach((i) => i.classList.remove('edit-mode'));
    item.classList.add('edit-mode');
    formBtn.innerHTML ='<i class = "fa-solid fa-pen"></i>  Update Item ';
    formBtn.style.backgroundColor ='#228B22'; 
    
    itemInput.value = item.textContent;


}

function removeItem(item)
{
       if(confirm('Are you sure ?'))
        {
        item.remove();
         // Remove item from storage
        removeItemFromStorage(item.textConent);
        checkUI();

        }
    
     
}

function removeItemFromStorage(item)
{
    let itemFromStorage = getItemfromStorage();

    //Filter out item to be removed
    itemFromStorage = itemFromStorage.filter((i) => i !== item);

    //Re-set to localstorage
    localStorage.setItem('items', JSON.stringify(itemFromStorage));
}

function clearItems(){
    while (itemList.firstChild){
        itemList.removeChild(itemList.firstChild);
    }

    //Clear from localStorage
    localStorage.removeItem('item');
    checkUI();

}

function filterItems(e) {

    const items = itemList.querySelectorAll('li');
    const text = e.target.value.toLowerCase();

    items.forEach((item) => {
        const itemName = item.firstChild.textContent.toLowerCase();

        if (itemName.indexOf(text) != -1)
        {
            item.style.display = 'flex';

        } else {
            item.style.display ='none';
        }
    });
}

function checkUI()
{
    itemInput.value ='';

    const items = itemList.querySelectorAll('li');

    if(items.length === 0){
        clearBtn.style.display = 'none';
        itemFilter.style.display = 'none';
    }else{
        clearBtn.style.display ='block';
        itemFilter.style.display = 'block';
    }

    formBtn.innerHTML = '<i class = "fa-solid fa-plus"></i> Add Item';
    formBtn.style.backgroundColor = '#333';
}
function init(){
itemForm.addEventListener('submit',onAddItem);
itemList.addEventListener('click',onClickItem);
clearBtn.addEventListener('click',clearItems);
itemFilter.addEventListener('input',filterItems);
document.addEventListener('DOMContentLoaded',displayItems);

checkUI();
}
init();