import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SnackbarAction, SnackbarComponent } from '../../../../../ui-essentials/src/lib/components/feedback/snackbar/snackbar.component';

@Component({
  selector: 'ui-snackbar-demo',
  standalone: true,
  imports: [CommonModule, SnackbarComponent],
  template: `
    <div class="demo-container">
      <h2>Snackbar Demo</h2>
      
      <!-- Size Variants -->
      <section class="demo-section">
        <h3>Sizes</h3>
        <div class="demo-row" style="gap: 16px; flex-direction: column; align-items: flex-start;">
          @for (size of sizes; track size) {
            <ui-snackbar 
              [size]="size"
              [message]="size + ' snackbar - This is a brief message'"
              [autoDismiss]="false"
              [position]="'bottom-left'"
              style="position: relative; bottom: auto; left: auto; transform: none; margin: 0;">
            </ui-snackbar>
          }
        </div>
      </section>
      
      <!-- Color Variants -->
      <section class="demo-section">
        <h3>Variants</h3>
        <div class="demo-row" style="gap: 16px; flex-direction: column; align-items: flex-start;">
          @for (variant of variants; track variant) {
            <ui-snackbar 
              [variant]="variant"
              [message]="variant + ' - This is a ' + variant + ' snackbar message'"
              [showIcon]="variant !== 'default'"
              [autoDismiss]="false"
              [position]="'bottom-left'"
              style="position: relative; bottom: auto; left: auto; transform: none; margin: 0;">
            </ui-snackbar>
          }
        </div>
      </section>
      
      <!-- With Actions -->
      <section class="demo-section">
        <h3>With Actions</h3>
        <div class="demo-row" style="gap: 16px; flex-direction: column; align-items: flex-start;">
          <ui-snackbar 
            message="Your file was saved successfully"
            variant="success"
            [showIcon]="true"
            [actions]="singleAction"
            [autoDismiss]="false"
            [position]="'bottom-left'"
            style="position: relative; bottom: auto; left: auto; transform: none; margin: 0;">
          </ui-snackbar>
          
          <ui-snackbar 
            message="Connection lost. Check your network and try again."
            variant="danger"
            [showIcon]="true"
            [actions]="multipleActions"
            [autoDismiss]="false"
            [position]="'bottom-left'"
            style="position: relative; bottom: auto; left: auto; transform: none; margin: 0;">
          </ui-snackbar>
        </div>
      </section>
      
      <!-- Position Variants -->
      <section class="demo-section">
        <h3>Positions</h3>
        <div class="demo-row" style="gap: 8px;">
          @for (position of positions; track position) {
            <button 
              class="demo-button"
              (click)="showPositionDemo(position)">
              {{ position }}
            </button>
          }
        </div>
        <p>Click buttons to see snackbars in different positions</p>
      </section>
      
      <!-- Interactive Examples -->
      <section class="demo-section">
        <h3>Interactive Examples</h3>
        <div class="demo-row" style="gap: 8px;">
          <button 
            class="demo-button demo-button--primary"
            (click)="showSuccessSnackbar()">
            Show Success
          </button>
          <button 
            class="demo-button demo-button--warning"
            (click)="showWarningSnackbar()">
            Show Warning
          </button>
          <button 
            class="demo-button demo-button--danger"
            (click)="showErrorSnackbar()">
            Show Error
          </button>
          <button 
            class="demo-button"
            (click)="showActionSnackbar()">
            Show with Action
          </button>
        </div>
      </section>
      
      <!-- Dynamic Snackbars -->
      @for (snackbar of activeSnackbars; track snackbar.id) {
        <ui-snackbar
          [size]="snackbar.size"
          [variant]="snackbar.variant"
          [message]="snackbar.message"
          [showIcon]="snackbar.showIcon"
          [actions]="snackbar.actions"
          [position]="snackbar.position"
          [autoDismiss]="snackbar.autoDismiss"
          [duration]="snackbar.duration"
          (dismissed)="removeSnackbar(snackbar.id)"
          (expired)="removeSnackbar(snackbar.id)"
          (actionClicked)="handleActionClick($event, snackbar.id)">
        </ui-snackbar>
      }
      
      <!-- Status -->
      <section class="demo-section">
        <h3>Demo Status</h3>
        <p>Active snackbars: {{ activeSnackbars.length }}</p>
        <p>Total shown: {{ totalShown }}</p>
        <p>Last action: {{ lastAction || 'None' }}</p>
      </section>
    </div>
  `,
  styleUrl: './snackbar-demo.component.scss'
})
export class SnackbarDemoComponent {
  sizes = ['sm', 'md', 'lg'] as const;
  variants = ['default', 'primary', 'success', 'warning', 'danger', 'info'] as const;
  positions = [
    'bottom-center', 'bottom-left', 'bottom-right',
    'top-center', 'top-left', 'top-right'
  ] as const;
  
  activeSnackbars: any[] = [];
  totalShown = 0;
  lastAction = '';
  
  singleAction: SnackbarAction[] = [
    { label: 'UNDO', handler: () => this.handleDemoAction('Undo clicked') }
  ];
  
  multipleActions: SnackbarAction[] = [
    { label: 'RETRY', handler: () => this.handleDemoAction('Retry clicked') },
    { label: 'SETTINGS', handler: () => this.handleDemoAction('Settings clicked') }
  ];
  
  showPositionDemo(position: string): void {
    this.addSnackbar({
      message: `Snackbar at ${position}`,
      variant: 'primary',
      position: position as any,
      showIcon: true,
      autoDismiss: true,
      duration: 3000
    });
  }
  
  showSuccessSnackbar(): void {
    this.addSnackbar({
      message: 'Operation completed successfully!',
      variant: 'success',
      showIcon: true,
      actions: this.singleAction
    });
  }
  
  showWarningSnackbar(): void {
    this.addSnackbar({
      message: 'Warning: This action cannot be undone',
      variant: 'warning',
      showIcon: true,
      autoDismiss: false
    });
  }
  
  showErrorSnackbar(): void {
    this.addSnackbar({
      message: 'Error: Failed to save changes',
      variant: 'danger',
      showIcon: true,
      actions: this.multipleActions,
      autoDismiss: false
    });
  }
  
  showActionSnackbar(): void {
    this.addSnackbar({
      message: 'File moved to trash',
      variant: 'default',
      actions: [
        { 
          label: 'UNDO', 
          handler: () => {
            this.handleDemoAction('File restored');
            this.removeSnackbar(this.activeSnackbars[this.activeSnackbars.length - 1]?.id);
          }
        }
      ],
      duration: 6000
    });
  }
  
  private addSnackbar(config: any): void {
    const snackbar = {
      id: Date.now() + Math.random(),
      size: 'md',
      position: 'bottom-center',
      autoDismiss: true,
      duration: 4000,
      showIcon: false,
      actions: [],
      ...config
    };
    
    this.activeSnackbars.push(snackbar);
    this.totalShown++;
  }
  
  removeSnackbar(id: number): void {
    this.activeSnackbars = this.activeSnackbars.filter(s => s.id !== id);
  }
  
  handleActionClick(action: SnackbarAction, snackbarId: number): void {
    this.lastAction = `${action.label} clicked on snackbar ${snackbarId}`;
  }
  
  private handleDemoAction(action: string): void {
    this.lastAction = action;
  }
}