Horizontal Scrolling

// Shared data and utilities for horizontal example variants
// This file is imported by all framework implementations to avoid duplication

// =============================================================================
// Constants
// =============================================================================

export const ITEM_COUNT = 10_000;
export const ITEM_HEIGHT = 220;
export const ITEM_WIDTH = 180;

// Color palette for cards
export const colors = [
  ["#667eea", "#764ba2"],
  ["#f093fb", "#f5576c"],
  ["#4facfe", "#00f2fe"],
  ["#43e97b", "#38f9d7"],
  ["#fa709a", "#fee140"],
  ["#a18cd1", "#fbc2eb"],
  ["#fccb90", "#d57eeb"],
  ["#e0c3fc", "#8ec5fc"],
  ["#f5576c", "#ff9a9e"],
  ["#667eea", "#00f2fe"],
];

export const emojis = ["🎵", "🎶", "🎸", "🥁", "🎹", "🎺", "🎻", "🎷", "🪗", "🪘"];

// =============================================================================
// Data Generation
// =============================================================================

// Generate card items
export const items = Array.from({ length: ITEM_COUNT }, (_, i) => {
  const color = colors[i % colors.length];
  return {
    id: i + 1,
    title: `Card ${i + 1}`,
    subtitle: `Item #${(i + 1).toLocaleString()}`,
    emoji: emojis[i % emojis.length],
    gradientStart: color[0],
    gradientEnd: color[1],
  };
});

// =============================================================================
// Templates
// =============================================================================

// Card template
export const itemTemplate = (item) => `
  <div class="card" style="background: linear-gradient(135deg, ${item.gradientStart} 0%, ${item.gradientEnd} 100%);">
    <div class="card-emoji">${item.emoji}</div>
    <div class="card-title">${item.title}</div>
    <div class="card-subtitle">${item.subtitle}</div>
  </div>
`;

// =============================================================================
// Utilities
// =============================================================================

// Calculate stats
export function calculateStats(domNodes, total) {
  const saved = Math.round((1 - domNodes / total) * 100);
  return { saved };
}

// Format stats HTML
export function formatStatsHtml(domNodes, total) {
  const { saved } = calculateStats(domNodes, total);
  return `
    <span><strong>Total:</strong> ${total.toLocaleString()}</span>
    <span><strong>DOM nodes:</strong> ${domNodes}</span>
    <span><strong>Memory saved:</strong> ${saved}%</span>
  `;
}

/* Horizontal Scrolling Example — example-specific styles only
   Common styles (.container, h1, .description, .stats, footer)
   are provided by example/example.css using shell.css design tokens. */

/* List container - full width, responsive height */
#list-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 220px;
    overflow: hidden;
}

/* Override vlist defaults for horizontal cards */
#list-container .vlist {
    border: none;
    border-radius: 12px;
    background: transparent;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
}

#list-container .vlist-viewport {
    max-width: 100%;
    width: 100% !important;
    overflow-x: auto;
}

#list-container .vlist-item {
    padding: 8px;
    border-right: none;
    cursor: pointer;
}

/* Card styles */
.card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    color: #fff;
    text-align: center;
    padding: 16px 12px;
    transition:
        transform 0.15s ease-out,
        box-shadow 0.15s ease-out;
}

.vlist-item:hover .card {
    transform: scale(1.03);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.card-emoji {
    font-size: 36px;
    line-height: 1;
}

.card-title {
    font-weight: var(--fw-bold);
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.card-subtitle {
    font-size: 12px;
    opacity: 0.85;
    white-space: nowrap;
}

/* Bottom controls */
.controls {
    margin-top: 16px;
}

/* ============================================================================
   Responsive
   ============================================================================ */

@media (max-width: 900px) {
    #list-container {
        height: 190px;
    }

    #list-container .vlist-item {
        padding: 6px;
    }

    .card {
        padding: 10px 8px;
        border-radius: 10px;
    }

    .card-emoji {
        font-size: 30px;
    }

    .card-title {
        font-size: 14px;
    }
}

@media (max-width: 720px) {
    #list-container {
        height: 160px;
    }

    #list-container .vlist-item {
        padding: 4px;
    }

    .card {
        padding: 8px 6px;
        gap: 4px;
        border-radius: 8px;
    }

    .card-emoji {
        font-size: 24px;
    }

    .card-title {
        font-size: 12px;
    }

    .card-subtitle {
        font-size: 10px;
    }

    .controls {
        flex-direction: column;
        gap: 8px;
    }

    .controls button {
        width: 100%;
        font-size: 13px;
    }
}