---

// Шаг 1. Массив товаров
let products = [
    { id: 1, name: 'Ноутбук', price: 50000 },
    { id: 2, name: 'Мышь', price: 1200 },
    { id: 3, name: 'Клавиатура', price: 2500 },
    { id: 4, name: 'Монитор', price: 15000 },
    { id: 5, name: 'Наушники', price: 3500 }
];

console.log('Всего товаров: ' + products.length);
console.log('Первый товар: ' + products[0].name);
console.log('Цена второго: ' + products[1].price);


// Шаг 2. Добавляем 1000 товаров
for (let i = 1; i <= 1000; i++) {
    products.push({
        id: products.length + 1,
        name: 'Товар ' + i,
        price: i * 10
    });
}


// Счётчики
let searchCount = 0;
let cartCount = 0;
let handlersCount = 0;


// Шаг 5. Добавление в корзину
function addToCart() {
    cartCount++;
    document.getElementById('cart').textContent = cartCount;
}


// Вывод товаров на страницу
function render(items) {
    let html = '';

    for (let i = 0; i < items.length; i++) {
        html += '<li>' + items[i].name +
            ' — ' + items[i].price + ' руб.' +
            ' <button data-id="' + items[i].id +
            '">В корзину</button></li>';
    }

    document.getElementById('catalog').innerHTML = html;

    document.getElementById('info').textContent =
        'Найдено товаров: ' + items.length;
}


// Шаг 3. Поиск по названию и цене
function search() {
    searchCount++;

    console.log('Поиск запущен, раз: ' + searchCount);

    let text = document.getElementById('search').value.toLowerCase();

    let found = products.filter(function(product) {
        return product.name.toLowerCase().includes(text) ||
            String(product.price).includes(text);
    });

    render(found);
}


// Шаг 4. Оптимизация поиска debounce
function debounce(fn, delay) {
    let timer;

    return function() {
        clearTimeout(timer);
        timer = setTimeout(fn, delay);
    };
}


// Запуск поиска с задержкой 300 мс
document.getElementById('search').addEventListener(
    'input',
    debounce(search, 300)
);


// Шаг 5. Делегирование событий
document.getElementById('catalog').addEventListener('click', function(event) {
    if (event.target.tagName === 'BUTTON') {
        addToCart();

        let product = products.find(function(p) {
            return p.id == event.target.dataset.id;
        });

        if (product) {
            document.getElementById('info').textContent =
                'Добавлен: ' + product.name;
        }

        console.log('Добавлен товар с id ' + event.target.dataset.id);
    }
});


// Один обработчик на весь каталог
handlersCount = 1;
console.log('Всего создано обработчиков: ' + handlersCount);


// Первоначальный вывод каталога — всегда последняя строка
render(products);