dees-catalog/ts_web/elements/dees-toast.demo.ts

import { html, css, cssManager } from '@design.estate/dees-element';
import { DeesToast } from './dees-toast.js';
import './dees-button.js';

export const demoFunc = async () => {
  return html`
    <style>
      .demo-container {
        padding: 32px;
        min-height: 100vh;
        background: ${cssManager.bdTheme('#f8f9fa', '#0a0a0a')};
      }

      .demo-section {
        margin-bottom: 48px;
      }

      .demo-title {
        font-size: 24px;
        font-weight: 600;
        margin-bottom: 16px;
        color: ${cssManager.bdTheme('#333', '#fff')};
      }

      .demo-description {
        font-size: 14px;
        color: ${cssManager.bdTheme('#666', '#aaa')};
        margin-bottom: 24px;
      }

      .button-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 16px;
        margin-bottom: 32px;
      }

      .theme-toggle {
        position: fixed;
        top: 16px;
        right: 16px;
        z-index: 100;
      }
    </style>

    <div class="demo-container">
      <dees-button class="theme-toggle" @clicked=${() => {
        document.body.classList.toggle('bright');
      }}>Toggle Theme</dees-button>

      <div class="demo-section">
        <h2 class="demo-title">Toast Types</h2>
        <p class="demo-description">
          Different toast types for various notification scenarios. Click any button to show a toast.
        </p>
        <div class="button-grid">
          <dees-button @clicked=${() => {
            DeesToast.info('This is an informational message');
          }}>Info Toast</dees-button>
          
          <dees-button type="highlighted" @clicked=${() => {
            DeesToast.success('Operation completed successfully!');
          }}>Success Toast</dees-button>
          
          <dees-button @clicked=${() => {
            DeesToast.warning('Please review before proceeding');
          }}>Warning Toast</dees-button>
          
          <dees-button @clicked=${() => {
            DeesToast.error('An error occurred while processing');
          }}>Error Toast</dees-button>
        </div>
      </div>

      <div class="demo-section">
        <h2 class="demo-title">Toast Positions</h2>
        <p class="demo-description">
          Toasts can appear in different positions on the screen.
        </p>
        <div class="button-grid">
          <dees-button @clicked=${() => {
            DeesToast.show({
              message: 'Top Right Position',
              type: 'info',
              position: 'top-right'
            });
          }}>Top Right</dees-button>
          
          <dees-button @clicked=${() => {
            DeesToast.show({
              message: 'Top Left Position',
              type: 'info',
              position: 'top-left'
            });
          }}>Top Left</dees-button>
          
          <dees-button @clicked=${() => {
            DeesToast.show({
              message: 'Bottom Right Position',
              type: 'info',
              position: 'bottom-right'
            });
          }}>Bottom Right</dees-button>
          
          <dees-button @clicked=${() => {
            DeesToast.show({
              message: 'Bottom Left Position',
              type: 'info',
              position: 'bottom-left'
            });
          }}>Bottom Left</dees-button>
          
          <dees-button @clicked=${() => {
            DeesToast.show({
              message: 'Top Center Position',
              type: 'info',
              position: 'top-center'
            });
          }}>Top Center</dees-button>
          
          <dees-button @clicked=${() => {
            DeesToast.show({
              message: 'Bottom Center Position',
              type: 'info',
              position: 'bottom-center'
            });
          }}>Bottom Center</dees-button>
        </div>
      </div>

      <div class="demo-section">
        <h2 class="demo-title">Duration Options</h2>
        <p class="demo-description">
          Control how long toasts stay visible. Duration in milliseconds.
        </p>
        <div class="button-grid">
          <dees-button @clicked=${() => {
            DeesToast.show({
              message: 'Quick toast (1 second)',
              type: 'info',
              duration: 1000
            });
          }}>1 Second</dees-button>
          
          <dees-button @clicked=${() => {
            DeesToast.show({
              message: 'Standard toast (3 seconds)',
              type: 'info',
              duration: 3000
            });
          }}>3 Seconds (Default)</dees-button>
          
          <dees-button @clicked=${() => {
            DeesToast.show({
              message: 'Long toast (5 seconds)',
              type: 'info',
              duration: 5000
            });
          }}>5 Seconds</dees-button>
          
          <dees-button @clicked=${() => {
            DeesToast.show({
              message: 'Manual dismiss only (click to close)',
              type: 'warning',
              duration: 0
            });
          }}>No Auto-Dismiss</dees-button>
        </div>
      </div>

      <div class="demo-section">
        <h2 class="demo-title">Multiple Toasts</h2>
        <p class="demo-description">
          Multiple toasts stack automatically. They maintain their order and animate smoothly.
        </p>
        <div class="button-grid">
          <dees-button @clicked=${() => {
            DeesToast.info('First notification');
            setTimeout(() => DeesToast.success('Second notification'), 200);
            setTimeout(() => DeesToast.warning('Third notification'), 400);
            setTimeout(() => DeesToast.error('Fourth notification'), 600);
          }}>Show Multiple</dees-button>
          
          <dees-button @clicked=${() => {
            for (let i = 1; i <= 5; i++) {
              setTimeout(() => {
                DeesToast.show({
                  message: `Notification #${i}`,
                  type: i % 2 === 0 ? 'success' : 'info',
                  duration: 2000 + (i * 500)
                });
              }, i * 100);
            }
          }}>Rapid Fire</dees-button>
        </div>
      </div>

      <div class="demo-section">
        <h2 class="demo-title">Real-World Examples</h2>
        <p class="demo-description">
          Common use cases for toast notifications in applications.
        </p>
        <div class="button-grid">
          <dees-button @clicked=${async () => {
            const toast = await DeesToast.show({
              message: 'Saving changes...',
              type: 'info',
              duration: 0
            });
            
            // Simulate save operation
            setTimeout(() => {
              toast.dismiss();
              DeesToast.success('Changes saved successfully!');
            }, 2000);
          }}>Save Operation</dees-button>
          
          <dees-button @clicked=${() => {
            DeesToast.error('Failed to connect to server. Please check your internet connection.');
          }}>Network Error</dees-button>
          
          <dees-button @clicked=${() => {
            DeesToast.warning('Your session will expire in 5 minutes');
          }}>Session Warning</dees-button>
          
          <dees-button @clicked=${() => {
            DeesToast.success('File uploaded successfully!');
          }}>Upload Complete</dees-button>
        </div>
      </div>

      <div class="demo-section">
        <h2 class="demo-title">Programmatic Control</h2>
        <p class="demo-description">
          Advanced control over toast behavior.
        </p>
        <div class="button-grid">
          <dees-button @clicked=${async () => {
            const toast = await DeesToast.show({
              message: 'This toast can be dismissed programmatically',
              type: 'info',
              duration: 0
            });
            
            setTimeout(() => {
              toast.dismiss();
              DeesToast.success('Toast dismissed after 2 seconds');
            }, 2000);
          }}>Programmatic Dismiss</dees-button>
          
          <dees-button @clicked=${() => {
            // Using the convenience methods
            DeesToast.info('Info message', 2000);
            setTimeout(() => DeesToast.success('Success message', 2000), 500);
            setTimeout(() => DeesToast.warning('Warning message', 2000), 1000);
            setTimeout(() => DeesToast.error('Error message', 2000), 1500);
          }}>Convenience Methods</dees-button>
        </div>
      </div>
    </div>
  `;
};