import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TooltipComponent } from '../../../../../ui-essentials/src/public-api';

@Component({
  selector: 'ui-tooltip-demo',
  standalone: true,
  imports: [CommonModule, TooltipComponent],
  template: `
    <div class="demo-container">
      <h2>Tooltip Demo</h2>
      
      <!-- Positions -->
      <section class="demo-section">
        <h3>Positions</h3>
        <div class="positions-grid">
          <ui-tooltip text="Top tooltip" position="top">
            <button class="demo-button">Top</button>
          </ui-tooltip>
          <ui-tooltip text="Bottom tooltip" position="bottom">
            <button class="demo-button">Bottom</button>
          </ui-tooltip>
          <ui-tooltip text="Left tooltip" position="left">
            <button class="demo-button">Left</button>
          </ui-tooltip>
          <ui-tooltip text="Right tooltip" position="right">
            <button class="demo-button">Right</button>
          </ui-tooltip>
        </div>
      </section>
      
      <!-- Sizes -->
      <section class="demo-section">
        <h3>Sizes</h3>
        <div class="demo-row">
          <ui-tooltip text="Small tooltip with concise text" size="sm">
            <button class="demo-button">Small</button>
          </ui-tooltip>
          <ui-tooltip text="Medium tooltip with moderate amount of text content" size="md">
            <button class="demo-button">Medium</button>
          </ui-tooltip>
          <ui-tooltip text="Large tooltip with extensive text content that can wrap to multiple lines for better readability" size="lg">
            <button class="demo-button">Large</button>
          </ui-tooltip>
        </div>
      </section>
      
      <!-- Triggers -->
      <section class="demo-section">
        <h3>Triggers</h3>
        <div class="demo-row">
          <ui-tooltip text="Hover to see tooltip" trigger="hover">
            <button class="demo-button">Hover</button>
          </ui-tooltip>
          <ui-tooltip text="Click to toggle tooltip" trigger="click">
            <button class="demo-button">Click</button>
          </ui-tooltip>
          <ui-tooltip text="Focus to see tooltip" trigger="focus">
            <button class="demo-button">Focus</button>
          </ui-tooltip>
        </div>
      </section>
      
      <!-- Different Elements -->
      <section class="demo-section">
        <h3>Different Elements</h3>
        <div class="demo-row">
          <ui-tooltip text="Tooltip on button">
            <button class="demo-button">Button</button>
          </ui-tooltip>
          <ui-tooltip text="Tooltip on text">
            <span class="demo-text">Hover me</span>
          </ui-tooltip>
          <ui-tooltip text="Tooltip on icon">
            <div class="demo-icon">?</div>
          </ui-tooltip>
        </div>
      </section>
      
      <!-- States -->
      <section class="demo-section">
        <h3>States</h3>
        <div class="demo-row">
          <ui-tooltip text="Normal tooltip">
            <button class="demo-button">Normal</button>
          </ui-tooltip>
          <ui-tooltip text="This tooltip is disabled" [disabled]="true">
            <button class="demo-button">Disabled</button>
          </ui-tooltip>
        </div>
      </section>
      
      <!-- Custom Delay -->
      <section class="demo-section">
        <h3>Custom Delay</h3>
        <div class="demo-row">
          <ui-tooltip text="Fast tooltip (100ms)" [delay]="100">
            <button class="demo-button">Fast</button>
          </ui-tooltip>
          <ui-tooltip text="Normal tooltip (500ms)" [delay]="500">
            <button class="demo-button">Normal</button>
          </ui-tooltip>
          <ui-tooltip text="Slow tooltip (1000ms)" [delay]="1000">
            <button class="demo-button">Slow</button>
          </ui-tooltip>
        </div>
      </section>
      
      <!-- Interactive Example -->
      <section class="demo-section">
        <h3>Interactive</h3>
        <div class="demo-row">
          <ui-tooltip 
            text="Tooltip shown {{ showCount }} times" 
            (tooltipShow)="handleTooltipShow()"
            (tooltipHide)="handleTooltipHide()">
            <button class="demo-button">Track Events</button>
          </ui-tooltip>
          <p>Show count: {{ showCount }} | Hide count: {{ hideCount }}</p>
        </div>
      </section>
    </div>
  `,
  styleUrl: './tooltip-demo.component.scss'
})
export class TooltipDemoComponent {
  showCount = 0;
  hideCount = 0;
  
  handleTooltipShow(): void {
    this.showCount++;
    console.log('Tooltip shown', this.showCount);
  }
  
  handleTooltipHide(): void {
    this.hideCount++;
    console.log('Tooltip hidden', this.hideCount);
  }
}