catalog/ts_web/elements/sio-image-lightbox.ts

import {
  DeesElement,
  property,
  html,
  customElement,
  type TemplateResult,
  cssManager,
  css,
  unsafeCSS,
  state,
} from '@design.estate/dees-element';

// Import design tokens
import { colors, bdTheme } from './00colors.js';
import { spacing, radius, shadows, transitions } from './00tokens.js';
import { fontFamilies } from './00fonts.js';

// Import components
import { SioPdfViewer } from './sio-pdf-viewer.js';
SioPdfViewer;

export interface ILightboxFile {
  url: string;
  name: string;
  size?: number;
  type?: string;
}

// For backwards compatibility
export type ILightboxImage = ILightboxFile;

declare global {
  interface HTMLElementTagNameMap {
    'sio-image-lightbox': SioImageLightbox;
  }
}

@customElement('sio-image-lightbox')
export class SioImageLightbox extends DeesElement {
  public static demo = () => html`
    <sio-image-lightbox .isOpen=${true} .file=${{
      url: 'https://picsum.photos/800/600',
      name: 'Demo Image',
      type: 'image/jpeg'
    }}></sio-image-lightbox>
  `;

  @property({ type: Boolean })
  public accessor isOpen: boolean = false;

  @property({ type: Object })
  public accessor file: ILightboxFile | null = null;

  // For backwards compatibility
  public get image(): ILightboxFile | null {
    return this.file;
  }
  public set image(value: ILightboxFile | null) {
    this.file = value;
  }

  @state()
  private accessor fileLoaded: boolean = false;

  @state()
  private accessor scale: number = 1;

  @state()
  private accessor translateX: number = 0;

  @state()
  private accessor translateY: number = 0;

  private isDragging: boolean = false;
  private startX: number = 0;
  private startY: number = 0;

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        position: fixed;
        inset: 0;
        z-index: 10000;
        pointer-events: none;
        font-family: ${unsafeCSS(fontFamilies.sans)};
        isolation: isolate;
      }

      .overlay {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0);
        backdrop-filter: blur(0px);
        -webkit-backdrop-filter: blur(0px);
        transition: all 300ms ease;
        pointer-events: none;
        opacity: 0;
      }

      .overlay.open {
        background: rgba(0, 0, 0, 0.9);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        pointer-events: all;
        opacity: 1;
      }

      .container {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: ${unsafeCSS(spacing["8"])};
        pointer-events: none;
        opacity: 0;
        transform: scale(0.9);
        transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
      }

      .container.open {
        opacity: 1;
        transform: scale(1);
        pointer-events: all;
      }

      .content-wrapper {
        position: relative;
        max-width: 90vw;
        max-height: 90vh;
        cursor: grab;
        user-select: none;
        transition: transform 100ms ease-out;
        z-index: 1;
      }

      .content-wrapper.dragging {
        cursor: grabbing;
        transition: none;
      }
      
      .content-wrapper.pdf {
        cursor: default;
      }

      .image {
        display: block;
        max-width: 100%;
        max-height: 90vh;
        border-radius: ${unsafeCSS(radius.lg)};
        box-shadow: ${unsafeCSS(shadows["2xl"])};
        opacity: 0;
        transition: opacity 300ms ease;
      }

      .image.loaded {
        opacity: 1;
      }
      
      .pdf-viewer {
        width: 90vw;
        height: 90vh;
        border-radius: ${unsafeCSS(radius.lg)};
        box-shadow: ${unsafeCSS(shadows["2xl"])};
        background: white;
        opacity: 0;
        transition: opacity 300ms ease;
        border: none;
      }
      
      .pdf-viewer.loaded {
        opacity: 1;
      }

      .loading {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        display: flex;
        align-items: center;
        gap: ${unsafeCSS(spacing["2"])};
      }

      .spinner {
        animation: spin 1s linear infinite;
      }

      @keyframes spin {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }

      .controls {
        position: absolute;
        top: ${unsafeCSS(spacing["4"])};
        right: ${unsafeCSS(spacing["4"])};
        display: flex;
        gap: ${unsafeCSS(spacing["2"])};
        opacity: 0;
        transition: opacity 200ms ease;
        z-index: 10;
      }

      .container.open .controls {
        opacity: 1;
      }

      .control-button {
        width: 40px;
        height: 40px;
        border-radius: ${unsafeCSS(radius.full)};
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: ${unsafeCSS(transitions.all)};
      }

      .control-button:hover {
        background: rgba(0, 0, 0, 0.7);
        transform: scale(1.1);
      }

      .control-button:active {
        transform: scale(0.95);
      }

      .info {
        position: absolute;
        bottom: ${unsafeCSS(spacing["4"])};
        left: ${unsafeCSS(spacing["4"])};
        right: ${unsafeCSS(spacing["4"])};
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: ${unsafeCSS(radius.lg)};
        padding: ${unsafeCSS(spacing["3"])} ${unsafeCSS(spacing["4"])};
        color: white;
        display: flex;
        justify-content: space-between;
        align-items: center;
        opacity: 0;
        transform: translateY(10px);
        transition: all 200ms ease;
        z-index: 10;
      }

      .container.open .info {
        opacity: 1;
        transform: translateY(0);
      }

      .info-name {
        font-weight: 500;
        font-size: 0.9375rem;
      }

      .info-actions {
        display: flex;
        gap: ${unsafeCSS(spacing["3"])};
      }

      .info-button {
        background: none;
        border: none;
        color: white;
        opacity: 0.8;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: ${unsafeCSS(spacing["1"])};
        font-size: 0.875rem;
        padding: ${unsafeCSS(spacing["1"])} ${unsafeCSS(spacing["2"])};
        border-radius: ${unsafeCSS(radius.md)};
        transition: ${unsafeCSS(transitions.all)};
      }

      .info-button:hover {
        opacity: 1;
        background: rgba(255, 255, 255, 0.1);
      }

      @media (max-width: 600px) {
        .container {
          padding: ${unsafeCSS(spacing["4"])};
        }

        .controls {
          top: ${unsafeCSS(spacing["2"])};
          right: ${unsafeCSS(spacing["2"])};
        }

        .info {
          bottom: ${unsafeCSS(spacing["2"])};
          left: ${unsafeCSS(spacing["2"])};
          right: ${unsafeCSS(spacing["2"])};
          padding: ${unsafeCSS(spacing["2"])} ${unsafeCSS(spacing["3"])};
        }
      }
    `,
  ];

  private isPDF(): boolean {
    return this.file?.type?.includes('pdf') || 
           this.file?.name?.toLowerCase().endsWith('.pdf') || false;
  }

  public render(): TemplateResult {
    const contentStyle = this.scale !== 1 || this.translateX !== 0 || this.translateY !== 0
      ? `transform: scale(${this.scale}) translate(${this.translateX}px, ${this.translateY}px)`
      : '';

    const isPDF = this.isPDF();

    return html`
      <div class="overlay ${this.isOpen ? 'open' : ''}" @click=${(e: Event) => {
        if (e.target === e.currentTarget) this.close(e);
      }}></div>
      <div class="container ${this.isOpen ? 'open' : ''}">
        ${this.file ? html`
          <div class="controls">
            ${!isPDF ? html`
              <div class="control-button" @click=${this.zoomIn}>
                <sio-icon icon="zoom-in" size="18"></sio-icon>
              </div>
              <div class="control-button" @click=${this.zoomOut}>
                <sio-icon icon="zoom-out" size="18"></sio-icon>
              </div>
              <div class="control-button" @click=${this.resetZoom}>
                <sio-icon icon="maximize-2" size="18"></sio-icon>
              </div>
            ` : ''}
            <div class="control-button" @click=${(e: Event) => this.close(e)}>
              <sio-icon icon="x" size="18"></sio-icon>
            </div>
          </div>

          <div 
            class="content-wrapper ${this.isDragging ? 'dragging' : ''} ${isPDF ? 'pdf' : ''}"
            style="${contentStyle}"
            @mousedown=${!isPDF ? this.startDrag : undefined}
            @mousemove=${!isPDF ? this.drag : undefined}
            @mouseup=${!isPDF ? this.endDrag : undefined}
            @mouseleave=${!isPDF ? this.endDrag : undefined}
            @wheel=${this.handleWheel}
          >
            ${!this.fileLoaded ? html`
              <div class="loading">
                <sio-icon class="spinner" icon="loader" size="24"></sio-icon>
                <span>Loading...</span>
              </div>
            ` : ''}
            ${isPDF ? html`
              <sio-pdf-viewer
                class="pdf-viewer ${this.fileLoaded ? 'loaded' : ''}"
                .url="${this.file.url}"
                .fileName="${this.file.name}"
                @load=${() => this.fileLoaded = true}
              ></sio-pdf-viewer>
            ` : html`
              <img 
                class="image ${this.fileLoaded ? 'loaded' : ''}"
                src="${this.file.url}" 
                alt="${this.file.name}"
                @load=${() => this.fileLoaded = true}
                @error=${() => this.fileLoaded = false}
                @click=${(e: Event) => e.stopPropagation()}
              />
            `}
          </div>

          <div class="info">
            <div class="info-name">${this.file.name}</div>
            <div class="info-actions">
              <button class="info-button" @click=${this.download}>
                <sio-icon icon="download" size="16"></sio-icon>
                Download
              </button>
              <button class="info-button" @click=${this.openInNewTab}>
                <sio-icon icon="external-link" size="16"></sio-icon>
                Open
              </button>
            </div>
          </div>
        ` : ''}
      </div>
    `;
  }

  public async open(file: ILightboxFile | ILightboxImage) {
    this.file = file;
    this.fileLoaded = false;
    this.resetZoom();
    this.isOpen = true;

    // For PDFs, we'll handle loading state differently since it's in a separate component
    if (this.isPDF()) {
      // PDFs are handled by sio-pdf-viewer which manages its own loading state
      this.fileLoaded = true;
    }

    // Add keyboard listener
    document.addEventListener('keydown', this.handleKeyDown);
  }

  private close = (e?: Event) => {
    if (e) {
      e.preventDefault();
      e.stopPropagation();
    }
    
    this.isOpen = false;
    document.removeEventListener('keydown', this.handleKeyDown);
    
    // Dispatch close event
    this.dispatchEvent(new CustomEvent('lightbox-close', {
      bubbles: true,
      composed: true
    }));

    // Clean up after animation
    setTimeout(() => {
      this.file = null;
      this.fileLoaded = false;
      this.resetZoom();
    }, 300);
  }

  private handleKeyDown = (e: KeyboardEvent) => {
    if (e.key === 'Escape') {
      this.close();
    } else if (e.key === '+' || e.key === '=') {
      this.zoomIn();
    } else if (e.key === '-') {
      this.zoomOut();
    } else if (e.key === '0') {
      this.resetZoom();
    }
  }

  private zoomIn() {
    this.scale = Math.min(this.scale * 1.2, 3);
  }

  private zoomOut() {
    this.scale = Math.max(this.scale / 1.2, 0.5);
  }

  private resetZoom() {
    this.scale = 1;
    this.translateX = 0;
    this.translateY = 0;
  }

  private handleWheel = (e: WheelEvent) => {
    e.preventDefault();
    if (e.ctrlKey || e.metaKey) {
      // Zoom with ctrl/cmd + scroll
      if (e.deltaY < 0) {
        this.zoomIn();
      } else {
        this.zoomOut();
      }
    }
  }

  private startDrag = (e: MouseEvent) => {
    if (this.scale > 1) {
      this.isDragging = true;
      this.startX = e.clientX - this.translateX;
      this.startY = e.clientY - this.translateY;
      e.preventDefault();
    }
  }

  private drag = (e: MouseEvent) => {
    if (this.isDragging && this.scale > 1) {
      this.translateX = e.clientX - this.startX;
      this.translateY = e.clientY - this.startY;
    }
  }

  private endDrag = () => {
    this.isDragging = false;
  }

  private download() {
    if (!this.file) return;
    
    const a = document.createElement('a');
    a.href = this.file.url;
    a.download = this.file.name;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  }

  private openInNewTab() {
    if (!this.file) return;
    window.open(this.file.url, '_blank');
  }

  public async disconnectedCallback() {
    await super.disconnectedCallback();
    document.removeEventListener('keydown', this.handleKeyDown);
  }
}