catalog/ts_web/elements/upl-statuspage-header.demo.ts

import { html } from '@design.estate/dees-element';

export const demoFunc = () => html`
  <style>
    .demo-container {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .demo-section {
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 20px;
      background: #f5f5f5;
    }
    .demo-title {
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 16px;
      color: #333;
    }
    .demo-controls {
      display: flex;
      gap: 10px;
      margin-top: 16px;
      flex-wrap: wrap;
    }
    .demo-button {
      padding: 6px 12px;
      border: 1px solid #ddd;
      background: white;
      border-radius: 4px;
      cursor: pointer;
      font-size: 13px;
    }
    .demo-button:hover {
      background: #f0f0f0;
    }
  </style>
  
  <div class="demo-container">
    <!-- Basic Header -->
    <div class="demo-section">
      <div class="demo-title">Basic Header with Dynamic Title</div>
      <dees-demowrapper
        .runAfterRender=${async (wrapperElement: any) => {
          const header = wrapperElement.querySelector('upl-statuspage-header') as any;
          
          // Demo different titles
          const titles = [
            'MyService Status Page',
            'Production Environment Status',
            'API Health Dashboard',
            'Global Infrastructure Status',
            '🚀 Rocket Systems Monitor',
            'Multi-Region Service Status'
          ];
          
          let titleIndex = 0;
          header.pageTitle = titles[titleIndex];
          
          // Add event listeners
          header.addEventListener('reportNewIncident', (event: CustomEvent) => {
            console.log('Report incident clicked');
            alert('Report Incident form would open here');
          });
          
          header.addEventListener('statusSubscribe', (event: CustomEvent) => {
            console.log('Subscribe clicked');
            alert('Subscribe modal would open here');
          });
          
          // Cycle through titles
          setInterval(() => {
            titleIndex = (titleIndex + 1) % titles.length;
            header.pageTitle = titles[titleIndex];
          }, 2000);
        }}
      >
        <upl-statuspage-header></upl-statuspage-header>
      </dees-demowrapper>
    </div>

    <!-- Header with Hidden Buttons -->
    <div class="demo-section">
      <div class="demo-title">Header with Configurable Buttons</div>
      <dees-demowrapper
        .runAfterRender=${async (wrapperElement: any) => {
          const header = wrapperElement.querySelector('upl-statuspage-header') as any;
          header.pageTitle = 'Configurable Button States';
          
          // Add properties to control button visibility
          header.showReportButton = true;
          header.showSubscribeButton = true;
          
          const controls = document.createElement('div');
          controls.className = 'demo-controls';
          controls.innerHTML = `
            <button class="demo-button" id="toggleReport">Toggle Report Button</button>
            <button class="demo-button" id="toggleSubscribe">Toggle Subscribe Button</button>
            <button class="demo-button" id="toggleBoth">Hide Both</button>
            <button class="demo-button" id="showBoth">Show Both</button>
          `;
          wrapperElement.appendChild(controls);
          
          controls.querySelector('#toggleReport')?.addEventListener('click', () => {
            header.showReportButton = !header.showReportButton;
          });
          
          controls.querySelector('#toggleSubscribe')?.addEventListener('click', () => {
            header.showSubscribeButton = !header.showSubscribeButton;
          });
          
          controls.querySelector('#toggleBoth')?.addEventListener('click', () => {
            header.showReportButton = false;
            header.showSubscribeButton = false;
          });
          
          controls.querySelector('#showBoth')?.addEventListener('click', () => {
            header.showReportButton = true;
            header.showSubscribeButton = true;
          });
        }}
      >
        <upl-statuspage-header></upl-statuspage-header>
      </dees-demowrapper>
    </div>

    <!-- Header with Custom Styling -->
    <div class="demo-section">
      <div class="demo-title">Header with Custom Branding</div>
      <dees-demowrapper
        .runAfterRender=${async (wrapperElement: any) => {
          const header = wrapperElement.querySelector('upl-statuspage-header') as any;
          header.pageTitle = 'Enterprise Cloud Platform';
          
          // Custom branding properties
          header.brandColor = '#1976D2';
          header.logoUrl = 'https://via.placeholder.com/120x40/1976D2/ffffff?text=LOGO';
          header.customStyles = true;
          
          // Simulate different brand states
          const brands = [
            { title: 'Enterprise Cloud Platform', color: '#1976D2', logo: 'ENTERPRISE' },
            { title: 'StartUp SaaS Monitor', color: '#00BCD4', logo: 'STARTUP' },
            { title: 'Government Services Status', color: '#4CAF50', logo: 'GOV' },
            { title: 'Financial Systems Health', color: '#673AB7', logo: 'FINTECH' }
          ];
          
          let brandIndex = 0;
          setInterval(() => {
            brandIndex = (brandIndex + 1) % brands.length;
            const brand = brands[brandIndex];
            header.pageTitle = brand.title;
            header.brandColor = brand.color;
            header.logoUrl = `https://via.placeholder.com/120x40/${brand.color.slice(1)}/ffffff?text=${brand.logo}`;
          }, 3000);
        }}
      >
        <upl-statuspage-header></upl-statuspage-header>
      </dees-demowrapper>
    </div>

    <!-- Header with Loading State -->
    <div class="demo-section">
      <div class="demo-title">Header with Loading States</div>
      <dees-demowrapper
        .runAfterRender=${async (wrapperElement: any) => {
          const header = wrapperElement.querySelector('upl-statuspage-header') as any;
          header.pageTitle = 'Loading State Demo';
          header.loading = true;
          
          // Simulate loading completion
          setTimeout(() => {
            header.loading = false;
            header.pageTitle = 'Status Page Loaded';
          }, 2000);
          
          // Add loading toggle
          const controls = document.createElement('div');
          controls.className = 'demo-controls';
          controls.innerHTML = `
            <button class="demo-button" id="toggleLoading">Toggle Loading State</button>
          `;
          wrapperElement.appendChild(controls);
          
          controls.querySelector('#toggleLoading')?.addEventListener('click', () => {
            header.loading = !header.loading;
            if (header.loading) {
              header.pageTitle = 'Loading...';
              setTimeout(() => {
                header.loading = false;
                header.pageTitle = 'Status Page Ready';
              }, 2000);
            }
          });
        }}
      >
        <upl-statuspage-header></upl-statuspage-header>
      </dees-demowrapper>
    </div>

    <!-- Header with Event Counter -->
    <div class="demo-section">
      <div class="demo-title">Header with Event Tracking</div>
      <dees-demowrapper
        .runAfterRender=${async (wrapperElement: any) => {
          const header = wrapperElement.querySelector('upl-statuspage-header') as any;
          header.pageTitle = 'Event Tracking Demo';
          
          let reportCount = 0;
          let subscribeCount = 0;
          
          // Create counter display
          const counterDisplay = document.createElement('div');
          counterDisplay.style.marginTop = '16px';
          counterDisplay.style.fontSize = '14px';
          counterDisplay.innerHTML = `
            <div>Report Clicks: <strong id="reportCount">0</strong></div>
            <div>Subscribe Clicks: <strong id="subscribeCount">0</strong></div>
          `;
          wrapperElement.appendChild(counterDisplay);
          
          header.addEventListener('reportNewIncident', () => {
            reportCount++;
            counterDisplay.querySelector('#reportCount').textContent = reportCount.toString();
            console.log(`Report incident clicked ${reportCount} times`);
          });
          
          header.addEventListener('statusSubscribe', () => {
            subscribeCount++;
            counterDisplay.querySelector('#subscribeCount').textContent = subscribeCount.toString();
            console.log(`Subscribe clicked ${subscribeCount} times`);
          });
        }}
      >
        <upl-statuspage-header></upl-statuspage-header>
      </dees-demowrapper>
    </div>
  </div>
`;