(function (window) {
  'use strict';

  const buildRailInner = (options = {}) => {
    const context = options.context === 'modal' ? 'modal' : 'card';
    const count = Number.isInteger(options.count) && options.count > 0 ? options.count : (context === 'modal' ? 3 : 2);
    const itemsHtml = Array.from({ length: count }, buildSkeletonCard).join('');

    return `
      <div class="foodord-modal-upsells__header">
        <div class="foodord-skeleton foodord-upsell-skeleton__heading"></div>
      </div>
      <div class="foodord-modal-upsells__grid">
        ${itemsHtml}
      </div>
    `;
  };

  const buildSkeletonCard = () => `
    <article class="foodord-modal-upsells__item foodord-modal-upsells__item--skeleton" aria-hidden="true">
      <div class="foodord-modal-upsells__image-wrap">
        <div class="foodord-skeleton foodord-upsell-skeleton__image"></div>
      </div>
      <div class="foodord-modal-upsells__content">
        <div class="foodord-skeleton foodord-upsell-skeleton__title"></div>
        <div class="foodord-skeleton foodord-upsell-skeleton__price"></div>
        <div class="foodord-skeleton foodord-upsell-skeleton__button"></div>
      </div>
    </article>
  `;

  const buildRail = (options = {}) => {
    const context = options.context === 'modal' ? 'modal' : 'card';
    const sectionClasses = ['foodord-modal-upsells', 'foodord-modal-upsells--skeleton'];

    if (context === 'card') {
      sectionClasses.push('foodord-modal-upsells--card');
    }

    return `
      <section class="${sectionClasses.join(' ')}" aria-hidden="true">
        ${buildRailInner(options)}
      </section>
    `;
  };

  const buildOverlay = (options = {}) => `
    <div class="foodord-modal-upsells__loading-overlay" aria-hidden="true">
      ${buildRailInner(options)}
    </div>
  `;

  const mount = (container, options = {}) => {
    if (!container) {
      return;
    }

    container.innerHTML = buildRail(options);
  };

  const hydrateSection = (section) => {
    if (!section || section.dataset.foodordUpsellHydrationBound === '1') {
      return;
    }

    const images = Array.from(section.querySelectorAll('.foodord-modal-upsells__image'));
    if (!images.length) {
      return;
    }

    const pendingImages = images.filter((image) => !image.complete);
    if (!pendingImages.length) {
      return;
    }

    const context = section.classList.contains('foodord-modal-upsells--card') ? 'card' : 'modal';
    const itemCount = Math.max(1, section.querySelectorAll('.foodord-modal-upsells__item').length);

    section.dataset.foodordUpsellHydrationBound = '1';
    section.classList.add('foodord-modal-upsells--image-loading');

    if (!section.querySelector('.foodord-modal-upsells__loading-overlay')) {
      section.insertAdjacentHTML('beforeend', buildOverlay({ context, count: itemCount }));
    }

    let remaining = pendingImages.length;

    const markResolved = () => {
      remaining -= 1;
      if (remaining > 0) {
        return;
      }

      section.classList.remove('foodord-modal-upsells--image-loading');
      section.dataset.foodordUpsellHydrationBound = '0';

      const overlay = section.querySelector('.foodord-modal-upsells__loading-overlay');
      if (overlay) {
        overlay.remove();
      }
    };

    pendingImages.forEach((image) => {
      image.addEventListener('load', markResolved, { once: true });
      image.addEventListener('error', markResolved, { once: true });
    });
  };

  const hydrateScope = (scope) => {
    const root = scope && scope.querySelectorAll ? scope : document;
    const sections = root.querySelectorAll('.foodord-modal-upsells');

    sections.forEach(hydrateSection);
  };

  window.FoodordUpsellSkeleton = {
    buildRail,
    buildOverlay,
    hydrateScope,
    hydrateSection,
    mount
  };
})(window);
