dees-wcctools/test/views/view-empty-state.ts

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

@customElement('view-empty-state')
export class ViewEmptyState extends DeesElement {
  public static demo = [
    () => html`<view-empty-state></view-empty-state>`,
    () => html`<view-empty-state variant="no-results"></view-empty-state>`,
    () => html`<view-empty-state variant="error"></view-empty-state>`,
  ];

  @property()
  accessor variant: 'empty' | 'no-results' | 'error' = 'empty';

  @property()
  accessor title: string = '';

  @property()
  accessor description: string = '';

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100%;
        background: ${cssManager.bdTheme('#f5f5f5', '#0a0a0a')};
        color: ${cssManager.bdTheme('#1a1a1a', '#e5e5e5')};
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        padding: 40px;
        box-sizing: border-box;
      }

      .empty-state {
        text-align: center;
        max-width: 400px;
      }

      .icon-container {
        width: 120px;
        height: 120px;
        margin: 0 auto 24px;
        background: ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')};
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .icon {
        font-size: 48px;
        opacity: 0.5;
      }

      .icon.error {
        color: #ef4444;
        opacity: 1;
      }

      h2 {
        font-size: 24px;
        font-weight: 600;
        margin: 0 0 12px 0;
      }

      p {
        color: ${cssManager.bdTheme('#666', '#888')};
        margin: 0 0 24px 0;
        line-height: 1.6;
      }

      .actions {
        display: flex;
        gap: 12px;
        justify-content: center;
        flex-wrap: wrap;
      }

      .btn {
        padding: 12px 24px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.15s ease;
        border: none;
      }

      .btn-primary {
        background: #3b82f6;
        color: white;
      }

      .btn-primary:hover {
        background: #2563eb;
        transform: translateY(-1px);
      }

      .btn-secondary {
        background: ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')};
        color: ${cssManager.bdTheme('#1a1a1a', '#e5e5e5')};
      }

      .btn-secondary:hover {
        background: ${cssManager.bdTheme('#ddd', '#222')};
      }

      .illustration {
        margin-bottom: 24px;
      }

      .illustration svg {
        width: 200px;
        height: 150px;
      }

      .folder-icon {
        width: 80px;
        height: 80px;
        margin: 0 auto 16px;
        position: relative;
      }

      .folder-back {
        position: absolute;
        width: 80px;
        height: 60px;
        background: ${cssManager.bdTheme('#ddd', '#333')};
        border-radius: 4px 4px 8px 8px;
        bottom: 0;
      }

      .folder-front {
        position: absolute;
        width: 80px;
        height: 50px;
        background: ${cssManager.bdTheme('#e5e5e5', '#444')};
        border-radius: 0 4px 8px 8px;
        bottom: 0;
      }

      .folder-tab {
        position: absolute;
        width: 30px;
        height: 12px;
        background: ${cssManager.bdTheme('#ddd', '#333')};
        border-radius: 4px 4px 0 0;
        top: 0;
        left: 0;
      }

      .search-icon {
        width: 60px;
        height: 60px;
        border: 4px solid ${cssManager.bdTheme('#ccc', '#444')};
        border-radius: 50%;
        position: relative;
        margin: 0 auto 16px;
      }

      .search-icon::after {
        content: '';
        position: absolute;
        width: 4px;
        height: 20px;
        background: ${cssManager.bdTheme('#ccc', '#444')};
        border-radius: 2px;
        bottom: -18px;
        right: -8px;
        transform: rotate(-45deg);
      }

      .error-icon {
        width: 80px;
        height: 80px;
        border: 4px solid #ef4444;
        border-radius: 50%;
        position: relative;
        margin: 0 auto 16px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .error-icon::before {
        content: '!';
        font-size: 40px;
        font-weight: 700;
        color: #ef4444;
      }
    `,
  ];

  private getContent() {
    switch (this.variant) {
      case 'no-results':
        return {
          title: this.title || 'No results found',
          description:
            this.description ||
            "We couldn't find what you're looking for. Try adjusting your search or filters.",
          icon: 'search',
          primaryAction: 'Clear Filters',
          secondaryAction: 'Go Back',
        };
      case 'error':
        return {
          title: this.title || 'Something went wrong',
          description:
            this.description ||
            "We're having trouble loading this page. Please try again or contact support if the problem persists.",
          icon: 'error',
          primaryAction: 'Try Again',
          secondaryAction: 'Contact Support',
        };
      default:
        return {
          title: this.title || 'No items yet',
          description:
            this.description ||
            "Get started by creating your first item. It only takes a few seconds.",
          icon: 'folder',
          primaryAction: 'Create New',
          secondaryAction: 'Learn More',
        };
    }
  }

  public render() {
    const content = this.getContent();

    return html`
      <div class="empty-state">
        ${this.renderIcon(content.icon)}
        <h2>${content.title}</h2>
        <p>${content.description}</p>
        <div class="actions">
          <button class="btn btn-primary">${content.primaryAction}</button>
          <button class="btn btn-secondary">${content.secondaryAction}</button>
        </div>
      </div>
    `;
  }

  private renderIcon(type: string) {
    switch (type) {
      case 'search':
        return html`<div class="search-icon"></div>`;
      case 'error':
        return html`<div class="error-icon"></div>`;
      default:
        return html`
          <div class="folder-icon">
            <div class="folder-tab"></div>
            <div class="folder-back"></div>
            <div class="folder-front"></div>
          </div>
        `;
    }
  }
}