import { html } from '@design.estate/dees-element';
import { injectCssVariables } from '../../00variables.js';

export const demoFunc = () => {
  injectCssVariables();
  return html`
  <style>
    .demo-section {
      margin-bottom: 2rem;
    }
    .demo-section h3 {
      margin: 0 0 1rem 0;
      font-size: 0.875rem;
      color: var(--dees-muted-foreground);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .demo-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
    }
  </style>

  <div class="demo-section">
    <h3>Toast Types</h3>
    <div class="demo-row">
      <dees-mobile-button
        variant="outline"
        @click=${() => {
          const toast = document.createElement('dees-mobile-toast');
          (toast as any).type = 'success';
          (toast as any).message = 'Item saved successfully!';
          toast.addEventListener('close', () => toast.remove());
          document.body.appendChild(toast);
        }}
      >Success Toast</dees-mobile-button>

      <dees-mobile-button
        variant="outline"
        @click=${() => {
          const toast = document.createElement('dees-mobile-toast');
          (toast as any).type = 'error';
          (toast as any).message = 'Failed to save item. Please try again.';
          toast.addEventListener('close', () => toast.remove());
          document.body.appendChild(toast);
        }}
      >Error Toast</dees-mobile-button>

      <dees-mobile-button
        variant="outline"
        @click=${() => {
          const toast = document.createElement('dees-mobile-toast');
          (toast as any).type = 'warning';
          (toast as any).message = 'Your session will expire in 5 minutes.';
          toast.addEventListener('close', () => toast.remove());
          document.body.appendChild(toast);
        }}
      >Warning Toast</dees-mobile-button>

      <dees-mobile-button
        variant="outline"
        @click=${() => {
          const toast = document.createElement('dees-mobile-toast');
          (toast as any).type = 'info';
          (toast as any).message = 'New updates are available.';
          toast.addEventListener('close', () => toast.remove());
          document.body.appendChild(toast);
        }}
      >Info Toast</dees-mobile-button>
    </div>
  </div>

  <div class="demo-section">
    <h3>Custom Duration</h3>
    <div class="demo-row">
      <dees-mobile-button
        variant="secondary"
        @click=${() => {
          const toast = document.createElement('dees-mobile-toast');
          (toast as any).type = 'info';
          (toast as any).message = 'This toast stays for 10 seconds.';
          (toast as any).duration = 10000;
          toast.addEventListener('close', () => toast.remove());
          document.body.appendChild(toast);
        }}
      >Long Duration (10s)</dees-mobile-button>

      <dees-mobile-button
        variant="secondary"
        @click=${() => {
          const toast = document.createElement('dees-mobile-toast');
          (toast as any).type = 'success';
          (toast as any).message = 'Quick notification!';
          (toast as any).duration = 1500;
          toast.addEventListener('close', () => toast.remove());
          document.body.appendChild(toast);
        }}
      >Short Duration (1.5s)</dees-mobile-button>
    </div>
  </div>
`;
};