import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BreakpointContainerComponent } from '../../../../../ui-essentials/src/lib/components/layout/breakpoint-container';

@Component({
  selector: 'ui-breakpoint-container-demo',
  standalone: true,
  imports: [CommonModule, BreakpointContainerComponent],
  template: `
    <div class="demo-container">
      <h2>Breakpoint Container Demo</h2>
      <p>This component shows/hides content based on screen size. Resize your browser to see the effects.</p>
      
      <!-- Basic Visibility Controls -->
      <section class="demo-section">
        <h3>Basic Visibility Controls</h3>
        
        <div class="demo-row">
          <div class="demo-card">
            <h4>Always Visible</h4>
            <ui-breakpoint-container visibility="always">
              <div class="demo-content demo-content--primary">
                Always visible content
              </div>
            </ui-breakpoint-container>
          </div>
          
          <div class="demo-card">
            <h4>Mobile Only (< 768px)</h4>
            <ui-breakpoint-container visibility="mobile-only">
              <div class="demo-content demo-content--success">
                Only visible on mobile devices
              </div>
            </ui-breakpoint-container>
          </div>
          
          <div class="demo-card">
            <h4>Tablet Only (768px - 1024px)</h4>
            <ui-breakpoint-container visibility="tablet-only">
              <div class="demo-content demo-content--warning">
                Only visible on tablets
              </div>
            </ui-breakpoint-container>
          </div>
          
          <div class="demo-card">
            <h4>Desktop Only (≥ 1024px)</h4>
            <ui-breakpoint-container visibility="desktop-only">
              <div class="demo-content demo-content--info">
                Only visible on desktop
              </div>
            </ui-breakpoint-container>
          </div>
        </div>
      </section>
      
      <!-- Hidden Variants -->
      <section class="demo-section">
        <h3>Hidden Variants</h3>
        
        <div class="demo-row">
          <div class="demo-card">
            <h4>Mobile Hidden</h4>
            <ui-breakpoint-container visibility="mobile-hidden">
              <div class="demo-content demo-content--danger">
                Hidden on mobile (< 768px)
              </div>
            </ui-breakpoint-container>
          </div>
          
          <div class="demo-card">
            <h4>Tablet Hidden</h4>
            <ui-breakpoint-container visibility="tablet-hidden">
              <div class="demo-content demo-content--secondary">
                Hidden on tablets (768px - 1024px)
              </div>
            </ui-breakpoint-container>
          </div>
          
          <div class="demo-card">
            <h4>Desktop Hidden</h4>
            <ui-breakpoint-container visibility="desktop-hidden">
              <div class="demo-content demo-content--dark">
                Hidden on desktop (≥ 1024px)
              </div>
            </ui-breakpoint-container>
          </div>
        </div>
      </section>
      
      <!-- Screen Size Based -->
      <section class="demo-section">
        <h3>Screen Size Based</h3>
        
        <div class="demo-row">
          <div class="demo-card">
            <h4>Mobile Screen (< 640px)</h4>
            <ui-breakpoint-container visibility="mobile-screen">
              <div class="demo-content demo-content--success">
                Mobile screen size only
              </div>
            </ui-breakpoint-container>
          </div>
          
          <div class="demo-card">
            <h4>Tablet Screen (640px - 1024px)</h4>
            <ui-breakpoint-container visibility="tablet-screen">
              <div class="demo-content demo-content--warning">
                Tablet screen size only
              </div>
            </ui-breakpoint-container>
          </div>
          
          <div class="demo-card">
            <h4>Desktop Screen (≥ 1024px)</h4>
            <ui-breakpoint-container visibility="desktop-screen">
              <div class="demo-content demo-content--info">
                Desktop screen size only
              </div>
            </ui-breakpoint-container>
          </div>
        </div>
      </section>
      
      <!-- Range Based -->
      <section class="demo-section">
        <h3>Range Based Visibility</h3>
        
        <div class="demo-row">
          <div class="demo-card">
            <h4>Small to Medium (640px - 768px)</h4>
            <ui-breakpoint-container visibility="sm-to-md">
              <div class="demo-content demo-content--primary">
                Visible between small and medium breakpoints
              </div>
            </ui-breakpoint-container>
          </div>
          
          <div class="demo-card">
            <h4>Medium to Large (768px - 1024px)</h4>
            <ui-breakpoint-container visibility="md-to-lg">
              <div class="demo-content demo-content--secondary">
                Visible between medium and large breakpoints
              </div>
            </ui-breakpoint-container>
          </div>
        </div>
      </section>
      
      <!-- Custom Breakpoint Rules -->
      <section class="demo-section">
        <h3>Custom Breakpoint Rules</h3>
        
        <div class="demo-row">
          <div class="demo-card">
            <h4>Show from Small (≥ 640px)</h4>
            <ui-breakpoint-container [showSm]="true">
              <div class="demo-content demo-content--success">
                Visible from small breakpoint and up
              </div>
            </ui-breakpoint-container>
          </div>
          
          <div class="demo-card">
            <h4>Hide from Medium (≥ 768px)</h4>
            <ui-breakpoint-container [hideMd]="true">
              <div class="demo-content demo-content--danger">
                Hidden from medium breakpoint and up
              </div>
            </ui-breakpoint-container>
          </div>
          
          <div class="demo-card">
            <h4>Show from Large (≥ 1024px)</h4>
            <ui-breakpoint-container [showLg]="true">
              <div class="demo-content demo-content--info">
                Visible from large breakpoint and up
              </div>
            </ui-breakpoint-container>
          </div>
        </div>
      </section>
      
      <!-- Display Types -->
      <section class="demo-section">
        <h3>Display Types</h3>
        
        <div class="demo-row">
          <div class="demo-card">
            <h4>Block Display (Default)</h4>
            <ui-breakpoint-container displayType="block" visibility="always">
              <div class="demo-content demo-content--primary">
                Block display (default)
              </div>
            </ui-breakpoint-container>
          </div>
          
          <div class="demo-card">
            <h4>Inline Display</h4>
            <p>
              This is inline text with 
              <ui-breakpoint-container displayType="inline" visibility="desktop-only">
                <span class="demo-content demo-content--inline">desktop-only inline content</span>
              </ui-breakpoint-container>
              continuing after.
            </p>
          </div>
          
          <div class="demo-card">
            <h4>Flex Display</h4>
            <ui-breakpoint-container displayType="flex" visibility="always">
              <div class="demo-content demo-content--success" style="flex: 1; margin-right: 8px;">
                Flex Item 1
              </div>
              <div class="demo-content demo-content--warning" style="flex: 1;">
                Flex Item 2
              </div>
            </ui-breakpoint-container>
          </div>
        </div>
      </section>
      
      <!-- Print Media -->
      <section class="demo-section">
        <h3>Print Media</h3>
        
        <div class="demo-row">
          <div class="demo-card">
            <h4>Print Hidden</h4>
            <ui-breakpoint-container [printHidden]="true">
              <div class="demo-content demo-content--secondary">
                This content is hidden when printing
              </div>
            </ui-breakpoint-container>
          </div>
          
          <div class="demo-card">
            <h4>Print Only</h4>
            <ui-breakpoint-container [printOnly]="true">
              <div class="demo-content demo-content--dark">
                This content only appears when printing
              </div>
            </ui-breakpoint-container>
          </div>
        </div>
      </section>
      
      <!-- Interactive Example -->
      <section class="demo-section">
        <h3>Interactive Test</h3>
        <p>Current viewport info: Resize your browser window to test different breakpoints.</p>
        
        <div class="viewport-info">
          <ui-breakpoint-container visibility="mobile-screen">
            <div class="demo-content demo-content--success">
              📱 Mobile Screen (< 640px)
            </div>
          </ui-breakpoint-container>
          
          <ui-breakpoint-container visibility="tablet-screen">
            <div class="demo-content demo-content--warning">
              📟 Tablet Screen (640px - 1024px)
            </div>
          </ui-breakpoint-container>
          
          <ui-breakpoint-container visibility="desktop-screen">
            <div class="demo-content demo-content--info">
              🖥️ Desktop Screen (≥ 1024px)
            </div>
          </ui-breakpoint-container>
        </div>
        
        <p><strong>Test Instructions:</strong></p>
        <ul>
          <li>Resize your browser window to see different content appear/disappear</li>
          <li>Try the print preview to see print-specific content</li>
          <li>Different display types maintain their layout characteristics</li>
        </ul>
      </section>
    </div>
  `,
  styleUrl: './breakpoint-container-demo.component.scss'
})
export class BreakpointContainerDemoComponent {}