import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SplitViewComponent, PanelConfig, ResizeEvent } from 'ui-essentials';

@Component({
  selector: 'ui-split-view-demo',
  standalone: true,
  imports: [CommonModule, SplitViewComponent],
  template: `
    <div class="demo-container">
      <h2>Split View / Resizable Panels Demo</h2>
      
      <!-- Basic Horizontal Split -->
      <section class="demo-section">
        <h3>Basic Horizontal Split</h3>
        <div class="demo-split-container">
          <ui-split-view 
            [panels]="basicHorizontalPanels" 
            direction="horizontal" 
            size="md"
            (panelResized)="onPanelResized($event)">
            <div slot="left-panel" class="demo-panel-content demo-panel-content--primary">
              <h4>Left Panel</h4>
              <p>This is the left panel content. Drag the divider to resize!</p>
              <p>You can add any content here including forms, lists, or other components.</p>
            </div>
            <div slot="right-panel" class="demo-panel-content demo-panel-content--secondary">
              <h4>Right Panel</h4>
              <p>This is the right panel content.</p>
              <p>Panels maintain their content during resize operations.</p>
            </div>
          </ui-split-view>
        </div>
        <div class="demo-info">
          <p><strong>Usage:</strong> Drag the vertical divider to resize panels horizontally.</p>
        </div>
      </section>

      <!-- Basic Vertical Split -->
      <section class="demo-section">
        <h3>Basic Vertical Split</h3>
        <div class="demo-split-container">
          <ui-split-view 
            [panels]="basicVerticalPanels" 
            direction="vertical" 
            size="md"
            (panelResized)="onPanelResized($event)">
            <div slot="top-panel" class="demo-panel-content demo-panel-content--elevated">
              <h4>Top Panel</h4>
              <p>This is the top panel in a vertical split layout.</p>
            </div>
            <div slot="bottom-panel" class="demo-panel-content demo-panel-content--primary">
              <h4>Bottom Panel</h4>
              <p>This is the bottom panel. The divider can be dragged vertically.</p>
            </div>
          </ui-split-view>
        </div>
        <div class="demo-info">
          <p><strong>Usage:</strong> Drag the horizontal divider to resize panels vertically.</p>
        </div>
      </section>

      <!-- Three Panel Layout -->
      <section class="demo-section">
        <h3>Three Panel Layout</h3>
        <div class="demo-split-container">
          <ui-split-view 
            [panels]="threePanelLayout" 
            direction="horizontal" 
            size="lg"
            (panelResized)="onPanelResized($event)">
            <div slot="sidebar" class="demo-panel-content demo-panel-content--secondary">
              <h4>Sidebar</h4>
              <p>Navigation or menu content</p>
            </div>
            <div slot="main-content" class="demo-panel-content demo-panel-content--primary">
              <h4>Main Content</h4>
              <p>Primary content area with the most space.</p>
              <p>This panel takes up the majority of the available space.</p>
            </div>
            <div slot="details-panel" class="demo-panel-content demo-panel-content--elevated">
              <h4>Details Panel</h4>
              <p>Additional information or tools</p>
            </div>
          </ui-split-view>
        </div>
        <div class="demo-controls">
          <button (click)="collapsePanel('sidebar')">Collapse Sidebar</button>
          <button (click)="expandPanel('sidebar')" class="button--secondary">Expand Sidebar</button>
          <button (click)="collapsePanel('details-panel')" class="button--success">Collapse Details</button>
          <button (click)="expandPanel('details-panel')" class="button--success">Expand Details</button>
          <button (click)="resetThreePanelSizes()" class="button--danger">Reset Sizes</button>
        </div>
        <div class="demo-info">
          <p><strong>Features:</strong> Multiple panels with programmatic collapse/expand controls.</p>
        </div>
      </section>

      <!-- Size Variants -->
      <section class="demo-section">
        <h3>Size Variants</h3>
        
        <h4>Small Size</h4>
        <div class="demo-split-container" style="height: 200px;">
          <ui-split-view 
            [panels]="sizeVariantPanels" 
            direction="horizontal" 
            size="sm">
            <div slot="size-left" class="demo-panel-content demo-panel-content--primary">
              <h4>Small Split View</h4>
              <p>Compact layout with reduced spacing.</p>
            </div>
            <div slot="size-right" class="demo-panel-content demo-panel-content--secondary">
              <h4>Right Panel</h4>
              <p>Smaller padding and gaps.</p>
            </div>
          </ui-split-view>
        </div>

        <h4>Large Size</h4>
        <div class="demo-split-container" style="height: 500px;">
          <ui-split-view 
            [panels]="sizeVariantPanels2" 
            direction="horizontal" 
            size="lg">
            <div slot="size-left-lg" class="demo-panel-content demo-panel-content--primary">
              <h4>Large Split View</h4>
              <p>Spacious layout with generous spacing and padding.</p>
              <p>Perfect for complex layouts requiring more visual breathing room.</p>
            </div>
            <div slot="size-right-lg" class="demo-panel-content demo-panel-content--elevated">
              <h4>Right Panel</h4>
              <p>Enhanced spacing creates a more luxurious feel.</p>
            </div>
          </ui-split-view>
        </div>
        <div class="demo-info">
          <p><strong>Sizes:</strong> sm (compact), md (default), lg (spacious) - affects padding and spacing.</p>
        </div>
      </section>

      <!-- Panel Constraints -->
      <section class="demo-section">
        <h3>Panel Size Constraints</h3>
        <div class="demo-split-container">
          <ui-split-view 
            [panels]="constrainedPanels" 
            direction="horizontal" 
            size="md"
            (panelResized)="onPanelResized($event)">
            <div slot="constrained-left" class="demo-panel-content demo-panel-content--primary">
              <h4>Constrained Panel</h4>
              <p>Min: 150px, Max: 400px</p>
              <p>Try resizing - this panel has size constraints!</p>
            </div>
            <div slot="constrained-right" class="demo-panel-content demo-panel-content--secondary">
              <h4>Flexible Panel</h4>
              <p>No constraints - adapts to available space.</p>
            </div>
          </ui-split-view>
        </div>
        <div class="demo-info">
          <p><strong>Constraints:</strong> Left panel has min-width of 150px and max-width of 400px.</p>
        </div>
      </section>

      <!-- Disabled State -->
      <section class="demo-section">
        <h3>Disabled State</h3>
        <div class="demo-split-container">
          <ui-split-view 
            [panels]="basicHorizontalPanels" 
            direction="horizontal" 
            size="md"
            [disabled]="true">
            <div slot="left-panel" class="demo-panel-content demo-panel-content--primary">
              <h4>Disabled Split View</h4>
              <p>Resizing is disabled - dividers cannot be dragged.</p>
            </div>
            <div slot="right-panel" class="demo-panel-content demo-panel-content--secondary">
              <h4>Static Panel</h4>
              <p>All interaction is disabled when the component is in disabled state.</p>
            </div>
          </ui-split-view>
        </div>
        <div class="demo-info">
          <p><strong>Disabled:</strong> All resize functionality is disabled.</p>
        </div>
      </section>

      <!-- Nested Split Views -->
      <section class="demo-section">
        <h3>Nested Split Views</h3>
        <div class="demo-split-container" style="height: 500px;">
          <ui-split-view 
            [panels]="outerNestedPanels" 
            direction="horizontal" 
            size="md">
            <div slot="outer-left" class="demo-panel-content demo-panel-content--secondary">
              <h4>Left Panel</h4>
              <p>This is the outer left panel.</p>
            </div>
            <div slot="outer-right" style="padding: 0;">
              <ui-split-view 
                [panels]="innerNestedPanels" 
                direction="vertical" 
                size="md">
                <div slot="inner-top" class="demo-panel-content demo-panel-content--primary">
                  <h4>Nested Top</h4>
                  <p>This is a nested split view inside the right panel.</p>
                </div>
                <div slot="inner-bottom" class="demo-panel-content demo-panel-content--elevated">
                  <h4>Nested Bottom</h4>
                  <p>Fully functional nested resizable panels.</p>
                </div>
              </ui-split-view>
            </div>
          </ui-split-view>
        </div>
        <div class="demo-info">
          <p><strong>Nesting:</strong> Split views can be nested to create complex layouts.</p>
        </div>
      </section>

      <!-- Event Information -->
      <section class="demo-section">
        <h3>Resize Events</h3>
        <div class="demo-info">
          <p><strong>Last Resize Event:</strong> {{ lastResizeEvent || 'None' }}</p>
          <p><strong>Resize Count:</strong> {{ resizeCount }}</p>
        </div>
      </section>
    </div>
  `,
  styleUrl: './split-view-demo.component.scss'
})
export class SplitViewDemoComponent {
  resizeCount = 0;
  lastResizeEvent = '';

  // Basic horizontal panels
  basicHorizontalPanels: PanelConfig[] = [
    { id: 'left-panel', size: '40%' },
    { id: 'right-panel', size: '60%' }
  ];

  // Basic vertical panels
  basicVerticalPanels: PanelConfig[] = [
    { id: 'top-panel', size: '30%' },
    { id: 'bottom-panel', size: '70%' }
  ];

  // Three panel layout
  threePanelLayout: PanelConfig[] = [
    { id: 'sidebar', size: '250px', minSize: 200, maxSize: 400, variant: 'secondary' },
    { id: 'main-content', size: '1fr', variant: 'primary' },
    { id: 'details-panel', size: '300px', minSize: 250, maxSize: 500, variant: 'elevated' }
  ];

  // Size variant panels
  sizeVariantPanels: PanelConfig[] = [
    { id: 'size-left', size: '50%' },
    { id: 'size-right', size: '50%' }
  ];

  sizeVariantPanels2: PanelConfig[] = [
    { id: 'size-left-lg', size: '40%' },
    { id: 'size-right-lg', size: '60%' }
  ];

  // Constrained panels
  constrainedPanels: PanelConfig[] = [
    { id: 'constrained-left', size: '300px', minSize: 150, maxSize: 400 },
    { id: 'constrained-right', size: '1fr' }
  ];

  // Nested panels
  outerNestedPanels: PanelConfig[] = [
    { id: 'outer-left', size: '30%' },
    { id: 'outer-right', size: '70%' }
  ];

  innerNestedPanels: PanelConfig[] = [
    { id: 'inner-top', size: '40%' },
    { id: 'inner-bottom', size: '60%' }
  ];

  onPanelResized(event: ResizeEvent): void {
    this.resizeCount++;
    this.lastResizeEvent = `Panel ${event.panelId} resized to ${Math.round(event.newSize)}px (${event.direction})`;
    console.log('Panel resized:', event);
  }

  collapsePanel(panelId: string): void {
    const panel = this.threePanelLayout.find(p => p.id === panelId);
    if (panel) {
      panel.collapsed = true;
    }
  }

  expandPanel(panelId: string): void {
    const panel = this.threePanelLayout.find(p => p.id === panelId);
    if (panel) {
      panel.collapsed = false;
    }
  }

  resetThreePanelSizes(): void {
    this.threePanelLayout = [
      { id: 'sidebar', size: '250px', minSize: 200, maxSize: 400, variant: 'secondary' },
      { id: 'main-content', size: '1fr', variant: 'primary' },
      { id: 'details-panel', size: '300px', minSize: 250, maxSize: 500, variant: 'elevated' }
    ];
  }
}