---

// Создаём 5000 тестовых товаров
let products = [];

for (let i = 1; i <= 5000; i++) {
  products.push({ id: i, name: 'Товар ' + i, price: i * 10 });
}

console.log('Всего товаров: ' + products.length);


// Создаём карточку товара
function makeCard(product) {
  return '<li><b>' + product.name + '</b><br>' +
      'Цена: ' + product.price + ' руб.<br>' +
      '<small>Артикул: ' + (100000 + product.id) + '</small></li>';
}


// Показываем все товары сразу
function renderAll() {
  let start = performance.now();
  let html = '';

  for (let i = 0; i < products.length; i++) {
    html += makeCard(products[i]);
  }

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

  let time = performance.now() - start;

  console.log('Показано товаров: ' + products.length +
      ', время: ' + time.toFixed(1) + ' мс');
}


// Постепенная загрузка товаров
let shown = 0;
let pageSize = 50;

function showMore() {
  let start = performance.now();
  let end = Math.min(shown + pageSize, products.length);
  let html = '';

  for (let i = shown; i < end; i++) {
    html += makeCard(products[i]);
  }

  document.getElementById('catalog').insertAdjacentHTML('beforeend', html);

  shown = end;

  document.body.offsetHeight;

  let time = performance.now() - start;

  console.log('Показано товаров: ' + shown +
      ', время: ' + time.toFixed(1) + ' мс');

  // Показываем количество оставшихся товаров
  let remaining = products.length - shown;

  if (remaining > 0) {
    document.getElementById('btnMore').textContent =
      'Показать ещё (осталось ' + remaining + ')';
  } else {
    document.getElementById('btnMore').style.display = 'none';
  }
}


// Кнопка загрузки товаров
document.getElementById('btnMore').addEventListener('click', showMore);


// Автоматическая загрузка при прокрутке
let observer = new IntersectionObserver(function (entries) {
  if (entries[0].isIntersecting) {
    console.log('Подгрузка при прокрутке');
    showMore();
  }
}, { rootMargin: '400px' });

observer.observe(document.getElementById('btnMore'));


// Тарифы доставки
let tariffs = {
  'Москва': 450,
  'Самара': 500,
  'Казань': 350,
  'Владивосток': 900
};


// Медленный расчёт доставки
function calcDelivery(city) {
  let start = Date.now();

  while (Date.now() - start < 1000) {}

  return tariffs[city];
}


// Создаём кэш
let cache = {};


// Загружаем кэш из localStorage
let saved = localStorage.getItem('deliveryCache');

if (saved !== null) {
  cache = JSON.parse(saved);

  console.log('Кэш загружен из localStorage');
  console.log('Городов в кэше: ' + Object.keys(cache).length);
}


// Расчёт доставки с кэшированием
function calcDeliveryCached(city) {
  if (cache[city] !== undefined) {
    return cache[city];
  }

  let price = calcDelivery(city);

  cache[city] = price;

  // Сохраняем кэш
  localStorage.setItem('deliveryCache', JSON.stringify(cache));

  return price;
}


// Обработчик расчёта доставки
function onCalc() {
  let city = document.getElementById('city').value;

  let start = performance.now();

  let fromCache = cache[city] !== undefined;

  let price = calcDeliveryCached(city);

  let time = performance.now() - start;

  document.getElementById('delivery').textContent =
    'Доставка в город ' + city + ': ' + price + ' руб.' +
    (fromCache ? ' (из кэша)' : '');

  console.log('Расчёт для города ' + city +
      ': ' + time.toFixed(0) + ' мс');
}


// Кнопка расчёта доставки
document.getElementById('btnCalc').addEventListener('click', onCalc);


// Очистка кэша
document.getElementById('btnClear').addEventListener('click', function () {
  cache = {};

  localStorage.removeItem('deliveryCache');

  console.log('Кэш очищен');
});


// Запуск каталога
showMore();