import { Component, ChangeDetectionStrategy } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CarouselComponent, CarouselItem } from '../../../../../ui-essentials/src/lib/components/data-display/carousel';

@Component({
  selector: 'ui-carousel-demo',
  standalone: true,
  imports: [CommonModule, CarouselComponent],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="demo-container">
      <h2>Carousel Component Demo</h2>
      
      <!-- Size Variants -->
      <section class="demo-section">
        <h3>Size Variants</h3>
        <div class="demo-row">
          <div class="demo-item">
            <h4>Small</h4>
            <ui-carousel 
              [items]="imageItems"
              size="sm"
              variant="image"
              [autoplay]="false">
            </ui-carousel>
          </div>
          
          <div class="demo-item">
            <h4>Medium</h4>
            <ui-carousel 
              [items]="imageItems"
              size="md"
              variant="image"
              [autoplay]="false">
            </ui-carousel>
          </div>
          
          <div class="demo-item">
            <h4>Large</h4>
            <ui-carousel 
              [items]="imageItems"
              size="lg"
              variant="image"
              [autoplay]="false">
            </ui-carousel>
          </div>
        </div>
      </section>
      
      <!-- Variant Types -->
      <section class="demo-section">
        <h3>Variant Types</h3>
        
        <div class="demo-item">
          <h4>Image Carousel</h4>
          <ui-carousel 
            [items]="imageItems"
            variant="image"
            size="md"
            [autoplay]="false">
          </ui-carousel>
        </div>
        
        <div class="demo-item">
          <h4>Card Carousel</h4>
          <ui-carousel 
            [items]="cardItems"
            variant="card"
            size="md"
            [autoplay]="false">
          </ui-carousel>
        </div>
        
        <div class="demo-item">
          <h4>Content Carousel</h4>
          <ui-carousel 
            [items]="contentItems"
            variant="content"
            size="md"
            [autoplay]="false">
          </ui-carousel>
        </div>
      </section>
      
      <!-- Transition Effects -->
      <section class="demo-section">
        <h3>Transition Effects</h3>
        <div class="demo-row">
          <div class="demo-item">
            <h4>Slide</h4>
            <ui-carousel 
              [items]="imageItems.slice(0, 3)"
              transition="slide"
              size="md"
              [autoplay]="false">
            </ui-carousel>
          </div>
          
          <div class="demo-item">
            <h4>Fade</h4>
            <ui-carousel 
              [items]="imageItems.slice(0, 3)"
              transition="fade"
              size="md"
              [autoplay]="false">
            </ui-carousel>
          </div>
          
          <div class="demo-item">
            <h4>Scale</h4>
            <ui-carousel 
              [items]="imageItems.slice(0, 3)"
              transition="scale"
              size="md"
              [autoplay]="false">
            </ui-carousel>
          </div>
        </div>
      </section>
      
      <!-- Indicator Styles -->
      <section class="demo-section">
        <h3>Indicator Styles</h3>
        <div class="demo-row">
          <div class="demo-item">
            <h4>Dots</h4>
            <ui-carousel 
              [items]="imageItems.slice(0, 4)"
              indicatorStyle="dots"
              size="md"
              [autoplay]="false">
            </ui-carousel>
          </div>
          
          <div class="demo-item">
            <h4>Bars</h4>
            <ui-carousel 
              [items]="imageItems.slice(0, 4)"
              indicatorStyle="bars"
              size="md"
              [autoplay]="false">
            </ui-carousel>
          </div>
          
          <div class="demo-item">
            <h4>Thumbnails</h4>
            <ui-carousel 
              [items]="thumbnailItems"
              indicatorStyle="thumbnails"
              size="md"
              [autoplay]="false">
            </ui-carousel>
          </div>
        </div>
      </section>
      
      <!-- Features -->
      <section class="demo-section">
        <h3>Special Features</h3>
        <div class="demo-row">
          <div class="demo-item">
            <h4>Autoplay</h4>
            <ui-carousel 
              [items]="imageItems.slice(0, 3)"
              size="md"
              [autoplay]="true"
              [autoplayInterval]="2000">
            </ui-carousel>
          </div>
          
          <div class="demo-item">
            <h4>No Loop</h4>
            <ui-carousel 
              [items]="imageItems.slice(0, 3)"
              size="md"
              [loop]="false"
              [autoplay]="false">
            </ui-carousel>
          </div>
          
          <div class="demo-item">
            <h4>Disabled</h4>
            <ui-carousel 
              [items]="imageItems.slice(0, 3)"
              size="md"
              [disabled]="true">
            </ui-carousel>
          </div>
        </div>
      </section>
      
      <!-- Interactive Example -->
      <section class="demo-section">
        <h3>Interactive Example</h3>
        <ui-carousel 
          [items]="interactiveItems"
          variant="card"
          size="lg"
          [autoplay]="false"
          (slideChange)="handleSlideChange($event)"
          (itemClick)="handleItemClick($event)">
        </ui-carousel>
        <p class="demo-status">Current slide: {{ currentSlide + 1 }} of {{ interactiveItems.length }}</p>
        @if (lastClickedItem) {
          <p class="demo-status">Last clicked: {{ lastClickedItem.title }}</p>
        }
      </section>
    </div>
  `,
  styleUrl: './carousel-demo.component.scss'
})
export class CarouselDemoComponent {
  currentSlide = 0;
  lastClickedItem: CarouselItem | null = null;

  imageItems: CarouselItem[] = [
    {
      id: 1,
      imageUrl: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&h=400&fit=crop',
      title: 'Mountain Landscape',
      subtitle: 'Serene mountain views'
    },
    {
      id: 2,
      imageUrl: 'https://images.unsplash.com/photo-1501594907352-04cda38ebc29?w=800&h=400&fit=crop',
      title: 'Ocean Waves',
      subtitle: 'Peaceful ocean scenery'
    },
    {
      id: 3,
      imageUrl: 'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=800&h=400&fit=crop',
      title: 'Forest Path',
      subtitle: 'Mystical forest trail'
    },
    {
      id: 4,
      imageUrl: 'https://images.unsplash.com/photo-1501436513145-30f24e19fcc4?w=800&h=400&fit=crop',
      title: 'Desert Sunset',
      subtitle: 'Golden desert landscape'
    }
  ];

  cardItems: CarouselItem[] = [
    {
      id: 1,
      imageUrl: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400&h=200&fit=crop',
      title: 'Analytics Dashboard',
      subtitle: 'Data Visualization',
      content: 'Powerful analytics tools to understand your business metrics and make data-driven decisions.'
    },
    {
      id: 2,
      imageUrl: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=400&h=200&fit=crop',
      title: 'Team Collaboration',
      subtitle: 'Productivity Tools',
      content: 'Enhanced collaboration features to keep your team connected and productive from anywhere.'
    },
    {
      id: 3,
      imageUrl: 'https://images.unsplash.com/photo-1563207153-f403bf289096?w=400&h=200&fit=crop',
      title: 'Mobile Experience',
      subtitle: 'Cross-Platform',
      content: 'Seamless experience across all devices with our responsive design and mobile optimization.'
    }
  ];

  contentItems: CarouselItem[] = [
    {
      id: 1,
      title: 'Welcome to Our Platform',
      subtitle: 'Getting Started Guide',
      content: 'Discover amazing features and capabilities that will transform the way you work and collaborate with your team.'
    },
    {
      id: 2,
      title: 'Advanced Features',
      subtitle: 'Power User Tips',
      content: 'Unlock the full potential of our platform with advanced features designed for professional workflows.'
    },
    {
      id: 3,
      title: 'Success Stories',
      subtitle: 'Customer Testimonials',
      content: 'Join thousands of satisfied customers who have achieved remarkable results using our solutions.'
    }
  ];

  thumbnailItems: CarouselItem[] = [
    {
      id: 1,
      imageUrl: 'https://images.unsplash.com/photo-1517180102446-f3ece451e9d8?w=800&h=400&fit=crop',
      thumbnail: 'https://images.unsplash.com/photo-1517180102446-f3ece451e9d8?w=100&h=60&fit=crop',
      title: 'Urban Architecture',
      subtitle: 'Modern city design'
    },
    {
      id: 2,
      imageUrl: 'https://images.unsplash.com/photo-1449824913935-59a10b8d2000?w=800&h=400&fit=crop',
      thumbnail: 'https://images.unsplash.com/photo-1449824913935-59a10b8d2000?w=100&h=60&fit=crop',
      title: 'Natural Beauty',
      subtitle: 'Landscape photography'
    },
    {
      id: 3,
      imageUrl: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&h=400&fit=crop',
      thumbnail: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=100&h=60&fit=crop',
      title: 'Mountain Vista',
      subtitle: 'Alpine scenery'
    }
  ];

  interactiveItems: CarouselItem[] = [
    {
      id: 1,
      imageUrl: 'https://images.unsplash.com/photo-1557804506-669a67965ba0?w=400&h=200&fit=crop',
      title: 'Project Alpha',
      subtitle: 'Innovation Hub',
      content: 'Revolutionary project management tools designed to streamline your workflow and boost productivity.'
    },
    {
      id: 2,
      imageUrl: 'https://images.unsplash.com/photo-1552664730-d307ca884978?w=400&h=200&fit=crop',
      title: 'Team Dynamics',
      subtitle: 'Collaboration Suite',
      content: 'Advanced collaboration features that bring teams together, regardless of location or time zone.'
    },
    {
      id: 3,
      imageUrl: 'https://images.unsplash.com/photo-1504384308090-c894fdcc538d?w=400&h=200&fit=crop',
      title: 'Data Insights',
      subtitle: 'Analytics Platform',
      content: 'Comprehensive analytics and reporting tools to help you make informed business decisions.'
    }
  ];

  handleSlideChange(index: number): void {
    this.currentSlide = index;
    console.log('Slide changed to:', index);
  }

  handleItemClick(event: {item: CarouselItem, index: number}): void {
    this.lastClickedItem = event.item;
    console.log('Item clicked:', event);
  }
}