import { html } from '@design.estate/dees-element';
import type { ITileFolderItem } from './component.js';

export const demo = () => {
  const photosFolder: ITileFolderItem[] = [
    { type: 'image', name: 'sunset.jpg', thumbnailSrc: 'https://picsum.photos/200/200?random=1' },
    { type: 'image', name: 'mountain.jpg', thumbnailSrc: 'https://picsum.photos/200/200?random=2' },
    { type: 'image', name: 'ocean.jpg', thumbnailSrc: 'https://picsum.photos/200/200?random=3' },
    { type: 'image', name: 'forest.jpg', thumbnailSrc: 'https://picsum.photos/200/200?random=4' },
    { type: 'image', name: 'city.jpg', thumbnailSrc: 'https://picsum.photos/200/200?random=5' },
    { type: 'image', name: 'desert.jpg', thumbnailSrc: 'https://picsum.photos/200/200?random=6' },
  ];

  const projectFolder: ITileFolderItem[] = [
    { type: 'note', name: 'README.md' },
    { type: 'note', name: 'package.json' },
    { type: 'folder', name: 'src' },
    { type: 'folder', name: 'test' },
    { type: 'note', name: 'tsconfig.json' },
    { type: 'pdf', name: 'docs.pdf' },
    { type: 'image', name: 'logo.png', thumbnailSrc: 'https://picsum.photos/100/100?random=10' },
  ];

  const mediaFolder: ITileFolderItem[] = [
    { type: 'video', name: 'intro.mp4' },
    { type: 'audio', name: 'background.mp3' },
    { type: 'image', name: 'thumbnail.jpg', thumbnailSrc: 'https://picsum.photos/200/200?random=20' },
    { type: 'pdf', name: 'storyboard.pdf' },
  ];

  const emptyFolder: ITileFolderItem[] = [];

  const singleItemFolder: ITileFolderItem[] = [
    { type: 'pdf', name: 'report.pdf' },
  ];

  return html`
    <style>
      .demo-container {
        padding: 40px;
        background: #f5f5f5;
      }
      .demo-section {
        margin-bottom: 60px;
      }
      h3 {
        margin-bottom: 20px;
        font-size: 18px;
        font-weight: 600;
      }
      .tile-row {
        display: flex;
        gap: 24px;
        flex-wrap: wrap;
        align-items: flex-start;
      }
    </style>

    <div class="demo-container">
      <div class="demo-section">
        <h3>Folder Tiles</h3>
        <div class="tile-row">
          <dees-tile-folder
            name="Photos"
            .items=${photosFolder}
            label="6 photos"
            @tile-click=${(e: CustomEvent) => console.log('Folder clicked:', e.detail)}
          ></dees-tile-folder>

          <dees-tile-folder
            name="my-project"
            .items=${projectFolder}
            label="Project files"
          ></dees-tile-folder>

          <dees-tile-folder
            name="Media Assets"
            .items=${mediaFolder}
            label="Mixed media"
          ></dees-tile-folder>
        </div>
      </div>

      <div class="demo-section">
        <h3>Edge Cases</h3>
        <div class="tile-row">
          <dees-tile-folder
            name="Empty Folder"
            .items=${emptyFolder}
          ></dees-tile-folder>

          <dees-tile-folder
            name="Single Item"
            .items=${singleItemFolder}
          ></dees-tile-folder>
        </div>
      </div>

      <div class="demo-section">
        <h3>Size Variants</h3>
        <div class="tile-row">
          <dees-tile-folder
            size="small"
            name="Small"
            .items=${photosFolder}
          ></dees-tile-folder>

          <dees-tile-folder
            name="Default"
            .items=${photosFolder}
          ></dees-tile-folder>

          <dees-tile-folder
            size="large"
            name="Large"
            .items=${photosFolder}
          ></dees-tile-folder>
        </div>
      </div>
    </div>
  `;
};