ui-essentials/projects/demo-ui-essentials/src/app/demos/bottom-navigation-demo/bottom-navigation-demo.component.ts

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { faHome, faSearch, faUser, faHeart, faCog, faShoppingCart, faBell, faBookmark } from '@fortawesome/free-solid-svg-icons';
import { BottomNavigationComponent, BottomNavigationItem } from '../../../../../ui-essentials/src/lib/components/navigation/bottom-navigation';

@Component({
  selector: 'ui-bottom-navigation-demo',
  standalone: true,
  imports: [CommonModule, BottomNavigationComponent, FontAwesomeModule],
  template: `
    <div class="demo-container">
      <h2>Bottom Navigation Demo</h2>
      
      <!-- Size Variants -->
      <section class="demo-section">
        <h3>Sizes</h3>
        <div class="demo-row demo-row--vertical">
          @for (size of sizes; track size) {
            <div class="demo-item">
              <h4>{{ size.toUpperCase() }} Size</h4>
              <div class="demo-bottom-nav-container">
                <ui-bottom-navigation 
                  [size]="size" 
                  [items]="basicItems"
                  [activeItemId]="activeItemIds[size]"
                  (activeItemChanged)="handleActiveItemChange(size, $event)"
                  (itemClicked)="handleItemClick($event)">
                  
                  <fa-icon [icon]="faHome" data-icon="home"></fa-icon>
                  <fa-icon [icon]="faSearch" data-icon="search"></fa-icon>
                  <fa-icon [icon]="faUser" data-icon="profile"></fa-icon>
                  <fa-icon [icon]="faCog" data-icon="settings"></fa-icon>
                </ui-bottom-navigation>
              </div>
            </div>
          }
        </div>
      </section>
      
      <!-- Variant Styles -->
      <section class="demo-section">
        <h3>Variants</h3>
        <div class="demo-row demo-row--vertical">
          @for (variant of variants; track variant) {
            <div class="demo-item">
              <h4>{{ variant.charAt(0).toUpperCase() + variant.slice(1) }} Variant</h4>
              <div class="demo-bottom-nav-container">
                <ui-bottom-navigation 
                  [variant]="variant" 
                  [items]="basicItems"
                  [activeItemId]="activeItemIds[variant]"
                  (activeItemChanged)="handleActiveItemChange(variant, $event)"
                  (itemClicked)="handleItemClick($event)">
                  
                  <fa-icon [icon]="faHome" data-icon="home"></fa-icon>
                  <fa-icon [icon]="faSearch" data-icon="search"></fa-icon>
                  <fa-icon [icon]="faUser" data-icon="profile"></fa-icon>
                  <fa-icon [icon]="faCog" data-icon="settings"></fa-icon>
                </ui-bottom-navigation>
              </div>
            </div>
          }
        </div>
      </section>
      
      <!-- With Badges -->
      <section class="demo-section">
        <h3>With Badges</h3>
        <div class="demo-bottom-nav-container">
          <ui-bottom-navigation 
            [items]="itemsWithBadges"
            [activeItemId]="badgeActiveItemId"
            (activeItemChanged)="badgeActiveItemId = $event"
            (itemClicked)="handleItemClick($event)">
            
            <fa-icon [icon]="faHome" data-icon="home"></fa-icon>
            <fa-icon [icon]="faShoppingCart" data-icon="cart"></fa-icon>
            <fa-icon [icon]="faBell" data-icon="notifications"></fa-icon>
            <fa-icon [icon]="faBookmark" data-icon="saved"></fa-icon>
            <fa-icon [icon]="faUser" data-icon="profile"></fa-icon>
          </ui-bottom-navigation>
        </div>
      </section>
      
      <!-- States -->
      <section class="demo-section">
        <h3>States</h3>
        <div class="demo-row demo-row--vertical">
          <div class="demo-item">
            <h4>Elevated</h4>
            <div class="demo-bottom-nav-container">
              <ui-bottom-navigation 
                [items]="basicItems"
                [elevated]="true"
                [activeItemId]="elevatedActiveItemId"
                (activeItemChanged)="elevatedActiveItemId = $event"
                (itemClicked)="handleItemClick($event)">
                
                <fa-icon [icon]="faHome" data-icon="home"></fa-icon>
                <fa-icon [icon]="faSearch" data-icon="search"></fa-icon>
                <fa-icon [icon]="faUser" data-icon="profile"></fa-icon>
                <fa-icon [icon]="faCog" data-icon="settings"></fa-icon>
              </ui-bottom-navigation>
            </div>
          </div>
          
          <div class="demo-item">
            <h4>With Disabled Item</h4>
            <div class="demo-bottom-nav-container">
              <ui-bottom-navigation 
                [items]="itemsWithDisabled"
                [activeItemId]="disabledActiveItemId"
                (activeItemChanged)="disabledActiveItemId = $event"
                (itemClicked)="handleItemClick($event)">
                
                <fa-icon [icon]="faHome" data-icon="home"></fa-icon>
                <fa-icon [icon]="faSearch" data-icon="search"></fa-icon>
                <fa-icon [icon]="faUser" data-icon="profile"></fa-icon>
                <fa-icon [icon]="faCog" data-icon="settings"></fa-icon>
              </ui-bottom-navigation>
            </div>
          </div>
        </div>
      </section>
      
      <!-- Interactive Example -->
      <section class="demo-section">
        <h3>Interactive Example</h3>
        <div class="demo-bottom-nav-container">
          <ui-bottom-navigation 
            [items]="interactiveItems"
            [activeItemId]="interactiveActiveItemId"
            (activeItemChanged)="handleInteractiveItemChange($event)"
            (itemClicked)="handleInteractiveItemClick($event)">
            
            <fa-icon [icon]="faHome" data-icon="home"></fa-icon>
            <fa-icon [icon]="faSearch" data-icon="search"></fa-icon>
            <fa-icon [icon]="faHeart" data-icon="favorites"></fa-icon>
            <fa-icon [icon]="faUser" data-icon="profile"></fa-icon>
          </ui-bottom-navigation>
        </div>
        
        <div class="demo-info">
          <p><strong>Active Item:</strong> {{ getActiveItemLabel() }}</p>
          <p><strong>Click Count:</strong> {{ clickCount }}</p>
          <p><strong>Last Clicked:</strong> {{ lastClickedItem || 'None' }}</p>
        </div>
        
        <div class="demo-controls">
          <button 
            class="demo-button" 
            (click)="toggleHidden()"
            [class.active]="isHidden">
            {{ isHidden ? 'Show' : 'Hide' }} Navigation
          </button>
          <button 
            class="demo-button" 
            (click)="incrementBadge()">
            Increment Heart Badge
          </button>
        </div>
      </section>
    </div>
  `,
  styleUrl: './bottom-navigation-demo.component.scss'
})
export class BottomNavigationDemoComponent {
  // FontAwesome icons
  faHome = faHome;
  faSearch = faSearch;
  faUser = faUser;
  faHeart = faHeart;
  faCog = faCog;
  faShoppingCart = faShoppingCart;
  faBell = faBell;
  faBookmark = faBookmark;
  
  // Demo data
  sizes = ['sm', 'md', 'lg'] as const;
  variants = ['default', 'primary', 'secondary'] as const;
  
  // Active item tracking for different variants
  activeItemIds: Record<string, string> = {
    sm: 'home',
    md: 'home',
    lg: 'home',
    default: 'home',
    primary: 'home',
    secondary: 'home'
  };
  
  badgeActiveItemId = 'home';
  elevatedActiveItemId = 'home';
  disabledActiveItemId = 'home';
  interactiveActiveItemId = 'home';
  
  // Interactive demo state
  clickCount = 0;
  lastClickedItem = '';
  isHidden = false;
  heartBadgeCount = 3;
  
  // Item configurations
  basicItems: BottomNavigationItem[] = [
    { id: 'home', label: 'Home', icon: 'home' },
    { id: 'search', label: 'Search', icon: 'search' },
    { id: 'profile', label: 'Profile', icon: 'profile' },
    { id: 'settings', label: 'Settings', icon: 'settings' }
  ];
  
  itemsWithBadges: BottomNavigationItem[] = [
    { id: 'home', label: 'Home', icon: 'home' },
    { id: 'cart', label: 'Cart', icon: 'cart', badge: 2 },
    { id: 'notifications', label: 'Alerts', icon: 'notifications', badge: '99+' },
    { id: 'saved', label: 'Saved', icon: 'saved', badge: 15 },
    { id: 'profile', label: 'Profile', icon: 'profile' }
  ];
  
  itemsWithDisabled: BottomNavigationItem[] = [
    { id: 'home', label: 'Home', icon: 'home' },
    { id: 'search', label: 'Search', icon: 'search', disabled: true },
    { id: 'profile', label: 'Profile', icon: 'profile' },
    { id: 'settings', label: 'Settings', icon: 'settings' }
  ];
  
  get interactiveItems(): BottomNavigationItem[] {
    return [
      { id: 'home', label: 'Home', icon: 'home' },
      { id: 'search', label: 'Search', icon: 'search' },
      { id: 'favorites', label: 'Favorites', icon: 'favorites', badge: this.heartBadgeCount > 0 ? this.heartBadgeCount : undefined },
      { id: 'profile', label: 'Profile', icon: 'profile' }
    ];
  }
  
  handleActiveItemChange(context: string, itemId: string): void {
    this.activeItemIds[context] = itemId;
  }
  
  handleItemClick(item: BottomNavigationItem): void {
    console.log('Item clicked:', item);
  }
  
  handleInteractiveItemChange(itemId: string): void {
    this.interactiveActiveItemId = itemId;
  }
  
  handleInteractiveItemClick(item: BottomNavigationItem): void {
    this.clickCount++;
    this.lastClickedItem = item.label;
    console.log('Interactive item clicked:', item);
  }
  
  getActiveItemLabel(): string {
    const activeItem = this.interactiveItems.find(item => item.id === this.interactiveActiveItemId);
    return activeItem?.label || 'None';
  }
  
  toggleHidden(): void {
    this.isHidden = !this.isHidden;
    // In a real implementation, you would update the hidden property of the navigation
    // For demo purposes, this just toggles a state variable
  }
  
  incrementBadge(): void {
    this.heartBadgeCount++;
  }
}