dees-catalog-mobile/ts_web/elements/00group-ui/dees-mobile-gallery/dees-mobile-gallery.demo.ts

import { html } from '@design.estate/dees-element';
import { injectCssVariables } from '../../00variables.js';
import type { DeesMobileGallery } from './dees-mobile-gallery.js';

export const demoFunc = () => {
  injectCssVariables();

  // Sample images for demo
  const sampleImages = [
    {
      id: '1',
      url: 'https://picsum.photos/800/1200?random=1',
      thumbnailUrl: 'https://picsum.photos/100/100?random=1',
      filename: 'receipt_001.jpg',
    },
    {
      id: '2',
      url: 'https://picsum.photos/1200/800?random=2',
      thumbnailUrl: 'https://picsum.photos/100/100?random=2',
      filename: 'shopping_photo.jpg',
    },
    {
      id: '3',
      url: 'https://picsum.photos/800/800?random=3',
      thumbnailUrl: 'https://picsum.photos/100/100?random=3',
      filename: 'receipt_002.jpg',
    },
    {
      id: '4',
      url: 'https://example.com/document.pdf',
      filename: 'invoice.pdf',
      mimeType: 'application/pdf',
    },
  ];

  return html`
    <style>
      .demo-section {
        margin-bottom: 2rem;
      }
      .demo-section h3 {
        margin: 0 0 1rem 0;
        font-size: 0.875rem;
        color: var(--dees-muted-foreground);
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }
      .demo-note {
        font-size: 0.875rem;
        color: var(--dees-muted-foreground);
        margin-top: 0.5rem;
      }
      .demo-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
      }
    </style>

    <div class="demo-section">
      <h3>Basic Gallery</h3>
      <div class="demo-buttons">
        <dees-mobile-button
          @click=${() => {
            const gallery = document.createElement('dees-mobile-gallery') as DeesMobileGallery;
            gallery.items = sampleImages.slice(0, 3);
            gallery.config = {
              showFilename: true,
              showActions: true,
              allowDownload: true,
              allowDelete: false,
            };
            gallery.addEventListener('close', () => gallery.remove());
            gallery.addEventListener('download', (e: CustomEvent) => {
              console.log('Download requested:', e.detail);
            });
            document.body.appendChild(gallery);
          }}
        >Open Gallery (3 images)</dees-mobile-button>
      </div>
      <p class="demo-note">Fullscreen gallery with swipe navigation on mobile, arrow keys on desktop.</p>
    </div>

    <div class="demo-section">
      <h3>Single Image</h3>
      <div class="demo-buttons">
        <dees-mobile-button
          variant="outline"
          @click=${() => {
            const gallery = document.createElement('dees-mobile-gallery') as DeesMobileGallery;
            gallery.items = [sampleImages[0]];
            gallery.config = {
              showFilename: true,
              allowDownload: true,
            };
            gallery.addEventListener('close', () => gallery.remove());
            document.body.appendChild(gallery);
          }}
        >View Single Image</dees-mobile-button>
      </div>
      <p class="demo-note">Single image view without navigation controls.</p>
    </div>

    <div class="demo-section">
      <h3>With Delete Action</h3>
      <div class="demo-buttons">
        <dees-mobile-button
          variant="outline"
          @click=${() => {
            const gallery = document.createElement('dees-mobile-gallery') as DeesMobileGallery;
            gallery.items = sampleImages.slice(0, 3);
            gallery.config = {
              showFilename: true,
              allowDownload: true,
              allowDelete: true,
            };
            gallery.addEventListener('close', () => gallery.remove());
            gallery.addEventListener('delete', (e: CustomEvent) => {
              console.log('Delete requested:', e.detail);
              gallery.remove();
            });
            document.body.appendChild(gallery);
          }}
        >Gallery with Delete</dees-mobile-button>
      </div>
      <p class="demo-note">Shows delete action button in red.</p>
    </div>

    <div class="demo-section">
      <h3>Start at Specific Index</h3>
      <div class="demo-buttons">
        <dees-mobile-button
          variant="outline"
          @click=${() => {
            const gallery = document.createElement('dees-mobile-gallery') as DeesMobileGallery;
            gallery.items = sampleImages.slice(0, 3);
            gallery.config = {
              startIndex: 2,
              showFilename: true,
              allowDownload: true,
            };
            gallery.addEventListener('close', () => gallery.remove());
            document.body.appendChild(gallery);
          }}
        >Open at Image 3</dees-mobile-button>
      </div>
      <p class="demo-note">Opens gallery starting at the third image.</p>
    </div>

    <div class="demo-section">
      <h3>With PDF</h3>
      <div class="demo-buttons">
        <dees-mobile-button
          variant="outline"
          @click=${() => {
            const gallery = document.createElement('dees-mobile-gallery') as DeesMobileGallery;
            gallery.items = sampleImages;
            gallery.config = {
              startIndex: 3,
              showFilename: true,
              allowDownload: true,
            };
            gallery.addEventListener('close', () => gallery.remove());
            document.body.appendChild(gallery);
          }}
        >Gallery with PDF</dees-mobile-button>
      </div>
      <p class="demo-note">PDF files show a placeholder with filename.</p>
    </div>

    <div class="demo-section">
      <h3>Static Factory Method</h3>
      <div class="demo-buttons">
        <dees-mobile-button
          variant="outline"
          @click=${async () => {
            const { DeesMobileGallery } = await import('./dees-mobile-gallery.js');
            const result = await DeesMobileGallery.show(
              sampleImages.slice(0, 3),
              {
                showFilename: true,
                allowDownload: true,
                allowDelete: true,
              }
            );
            console.log('Gallery result:', result);
          }}
        >Use Static show()</dees-mobile-button>
      </div>
      <p class="demo-note">Uses the static factory method that returns a promise.</p>
    </div>

    <div class="demo-section">
      <h3>Minimal Mode</h3>
      <div class="demo-buttons">
        <dees-mobile-button
          variant="outline"
          @click=${() => {
            const gallery = document.createElement('dees-mobile-gallery') as DeesMobileGallery;
            gallery.items = sampleImages.slice(0, 3);
            gallery.config = {
              showFilename: false,
              showActions: false,
            };
            gallery.addEventListener('close', () => gallery.remove());
            document.body.appendChild(gallery);
          }}
        >Minimal Gallery</dees-mobile-button>
      </div>
      <p class="demo-note">No filename or action buttons - just images.</p>
    </div>
  `;
};