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

@Component({
  selector: 'ui-box-demo',
  standalone: true,
  imports: [CommonModule, BoxComponent],
  template: `
    <div class="demo-container">
      <h2>Box Component Demo</h2>
      
      <!-- Padding Examples -->
      <section class="demo-section">
        <h3>Padding Utilities</h3>
        <div class="demo-row">
          @for (spacing of spacings; track spacing) {
            <div class="demo-column">
              <h4>p="{{ spacing }}"</h4>
              <ui-box [p]="spacing" [border]="true" class="content-box">
                <div class="inner-content">Content with {{ spacing }} padding</div>
              </ui-box>
            </div>
          }
        </div>
      </section>
      
      <!-- Directional Padding -->
      <section class="demo-section">
        <h3>Directional Padding</h3>
        <div class="demo-row">
          <div class="demo-column">
            <h4>px="lg" (horizontal)</h4>
            <ui-box px="lg" [border]="true" class="content-box">
              <div class="inner-content">Horizontal padding</div>
            </ui-box>
          </div>
          
          <div class="demo-column">
            <h4>py="lg" (vertical)</h4>
            <ui-box py="lg" [border]="true" class="content-box">
              <div class="inner-content">Vertical padding</div>
            </ui-box>
          </div>
          
          <div class="demo-column">
            <h4>pt="xl" pb="sm"</h4>
            <ui-box pt="xl" pb="sm" [border]="true" class="content-box">
              <div class="inner-content">Mixed padding</div>
            </ui-box>
          </div>
        </div>
      </section>
      
      <!-- Margin Examples -->
      <section class="demo-section">
        <h3>Margin Utilities</h3>
        <div class="margin-demo-container">
          @for (spacing of marginSpacings; track spacing) {
            <ui-box [m]="spacing" [border]="true" [rounded]="true" class="margin-box">
              m="{{ spacing }}"
            </ui-box>
          }
        </div>
      </section>
      
      <!-- Display Variants -->
      <section class="demo-section">
        <h3>Display Options</h3>
        <div class="demo-column">
          <h4>display="flex"</h4>
          <ui-box display="flex" p="md" [border]="true" class="flex-demo">
            <div class="flex-item">Item 1</div>
            <div class="flex-item">Item 2</div>
            <div class="flex-item">Item 3</div>
          </ui-box>
          
          <h4>display="grid"</h4>
          <ui-box display="grid" p="md" [border]="true" class="grid-demo">
            <div class="grid-item">A</div>
            <div class="grid-item">B</div>
            <div class="grid-item">C</div>
            <div class="grid-item">D</div>
          </ui-box>
          
          <h4>display="inline-block"</h4>
          <div>
            <ui-box display="inline-block" p="sm" [border]="true" class="inline-demo">Box 1</ui-box>
            <ui-box display="inline-block" p="sm" [border]="true" class="inline-demo">Box 2</ui-box>
            <ui-box display="inline-block" p="sm" [border]="true" class="inline-demo">Box 3</ui-box>
          </div>
        </div>
      </section>
      
      <!-- Visual Styles -->
      <section class="demo-section">
        <h3>Visual Styles</h3>
        <div class="demo-row">
          <div class="demo-column">
            <h4>Basic</h4>
            <ui-box p="md">
              <div class="inner-content">Basic box</div>
            </ui-box>
          </div>
          
          <div class="demo-column">
            <h4>With Border</h4>
            <ui-box p="md" [border]="true">
              <div class="inner-content">Bordered box</div>
            </ui-box>
          </div>
          
          <div class="demo-column">
            <h4>Rounded</h4>
            <ui-box p="md" [border]="true" [rounded]="true">
              <div class="inner-content">Rounded box</div>
            </ui-box>
          </div>
          
          <div class="demo-column">
            <h4>With Shadow</h4>
            <ui-box p="md" [shadow]="true">
              <div class="inner-content">Shadow box</div>
            </ui-box>
          </div>
          
          <div class="demo-column">
            <h4>All Styles</h4>
            <ui-box p="lg" [border]="true" [rounded]="true" [shadow]="true">
              <div class="inner-content">Full styled</div>
            </ui-box>
          </div>
        </div>
      </section>
      
      <!-- Complex Layout Example -->
      <section class="demo-section">
        <h3>Complex Layout Example</h3>
        <ui-box p="lg" [border]="true" [rounded]="true" [shadow]="true">
          <ui-box mb="md">
            <h4 style="margin: 0;">Card Header</h4>
          </ui-box>
          
          <ui-box display="flex" mb="md">
            <ui-box pr="md" style="flex: 1;">
              <div class="inner-content">Left column content with some text that wraps nicely.</div>
            </ui-box>
            
            <ui-box pl="md" [border]="true" style="flex: 1;">
              <div class="inner-content">Right column with border and padding.</div>
            </ui-box>
          </ui-box>
          
          <ui-box pt="md" [border]="true" style="border-left: none; border-right: none; border-bottom: none;">
            <div class="inner-content">Footer with top border only</div>
          </ui-box>
        </ui-box>
      </section>
    </div>
  `,
  styleUrl: './box-demo.component.scss'
})
export class BoxDemoComponent {
  spacings = ['xs', 'sm', 'md', 'lg', 'xl'] as const;
  marginSpacings = ['xs', 'sm', 'md', 'lg'] as const;
}