import { html, cssManager } from '@design.estate/dees-element';
import '@design.estate/dees-wcctools/demotools';
import type { DeesAppuiActivitylog } from './dees-appui-activitylog.js';

export const demoFunc = () => {
  // Create the activity log element
  const activityLog = document.createElement('dees-appui-activitylog') as DeesAppuiActivitylog;

  // Add demo entries after the element is connected
  setTimeout(() => {
    activityLog.addMany([
      { type: 'login', user: 'John Doe', message: 'logged in from Chrome on macOS' },
      { type: 'create', user: 'John Doe', message: 'created a new project "Frontend App"' },
      { type: 'update', user: 'Jane Smith', message: 'updated API documentation' },
      { type: 'view', user: 'John Doe', message: 'viewed dashboard analytics' },
      { type: 'delete', user: 'Admin', message: 'removed deprecated endpoint' },
      { type: 'custom', user: 'System', message: 'scheduled backup completed', iconName: 'lucide:database' },
      { type: 'logout', user: 'Alice Brown', message: 'logged out' },
      { type: 'create', user: 'Jane Smith', message: 'created invoice #1234' },
    ]);

    // Subscribe to updates
    activityLog.entries$.subscribe((entries) => {
      console.log('Activity log updated:', entries.length, 'entries');
    });
  }, 100);

  return html`
    <dees-demowrapper>
      <style>
        .demo-container {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 600px;
          background: ${cssManager.bdTheme('#f4f4f5', '#09090b')};
          padding: 32px;
        }
      </style>
      <div class="demo-container">
        ${activityLog}
      </div>
    </dees-demowrapper>
  `;
};