import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HStackComponent, StackComponent, VStackComponent } from '../../../../../ui-essentials/src/lib/components/layout';

@Component({
  selector: 'ui-stack-demo',
  standalone: true,
  imports: [CommonModule, StackComponent, VStackComponent, HStackComponent],
  template: `
    <div class="demo-container">
      <h2>Stack Components Demo</h2>
      
      <!-- Basic Stack (column) -->
      <section class="demo-section">
        <h3>Basic Stack (Column)</h3>
        <div class="demo-example">
          <ui-stack spacing="md">
            <div class="demo-item">Item 1</div>
            <div class="demo-item">Item 2</div>
            <div class="demo-item">Item 3</div>
          </ui-stack>
        </div>
      </section>
      
      <!-- Stack Row -->
      <section class="demo-section">
        <h3>Stack (Row)</h3>
        <div class="demo-example">
          <ui-stack direction="row" spacing="md">
            <div class="demo-item">Item 1</div>
            <div class="demo-item">Item 2</div>
            <div class="demo-item">Item 3</div>
          </ui-stack>
        </div>
      </section>
      
      <!-- VStack Variations -->
      <section class="demo-section">
        <h3>VStack (Vertical Stack)</h3>
        <div class="demo-row">
          @for (spacing of spacings; track spacing) {
            <div class="demo-column">
              <h4>{{ spacing }} spacing</h4>
              <ui-vstack [spacing]="spacing">
                <div class="demo-item">Item A</div>
                <div class="demo-item">Item B</div>
                <div class="demo-item">Item C</div>
              </ui-vstack>
            </div>
          }
        </div>
      </section>
      
      <!-- HStack Variations -->
      <section class="demo-section">
        <h3>HStack (Horizontal Stack)</h3>
        <div class="demo-column">
          @for (spacing of spacings; track spacing) {
            <div class="demo-example">
              <h4>{{ spacing }} spacing</h4>
              <ui-hstack [spacing]="spacing">
                <div class="demo-item">Item A</div>
                <div class="demo-item">Item B</div>
                <div class="demo-item">Item C</div>
              </ui-hstack>
            </div>
          }
        </div>
      </section>
      
      <!-- Alignment Examples -->
      <section class="demo-section">
        <h3>Alignment Options</h3>
        <div class="demo-row">
          <div class="demo-column">
            <h4>VStack Alignment</h4>
            @for (align of alignments; track align) {
              <div class="demo-example alignment-demo">
                <h5>align="{{ align }}"</h5>
                <ui-vstack [align]="align" spacing="sm" class="alignment-container">
                  <div class="demo-item small">Small</div>
                  <div class="demo-item medium">Medium Item</div>
                  <div class="demo-item large">Large Item Here</div>
                </ui-vstack>
              </div>
            }
          </div>
          
          <div class="demo-column">
            <h4>HStack Alignment</h4>
            @for (align of alignments; track align) {
              <div class="demo-example alignment-demo">
                <h5>align="{{ align }}"</h5>
                <ui-hstack [align]="align" spacing="sm" class="alignment-container-horizontal">
                  <div class="demo-item small">Small</div>
                  <div class="demo-item medium">Medium<br>Two lines</div>
                  <div class="demo-item large">Large<br>Item<br>Three lines</div>
                </ui-hstack>
              </div>
            }
          </div>
        </div>
      </section>
      
      <!-- Justify Examples -->
      <section class="demo-section">
        <h3>Justify Options</h3>
        <div class="demo-column">
          <h4>HStack Justify (full width)</h4>
          @for (justify of justifyOptions; track justify) {
            <div class="demo-example">
              <h5>justify="{{ justify }}"</h5>
              <ui-hstack [justify]="justify" spacing="sm" [fullWidth]="true" class="justify-container">
                <div class="demo-item">A</div>
                <div class="demo-item">B</div>
                <div class="demo-item">C</div>
              </ui-hstack>
            </div>
          }
        </div>
      </section>
      
      <!-- Divider Examples -->
      <section class="demo-section">
        <h3>With Dividers</h3>
        <div class="demo-row">
          <div class="demo-column">
            <h4>VStack with Dividers</h4>
            <ui-vstack [divider]="true">
              <div class="demo-item">Section One</div>
              <div class="demo-item">Section Two</div>
              <div class="demo-item">Section Three</div>
            </ui-vstack>
          </div>
          
          <div class="demo-column">
            <h4>HStack with Dividers</h4>
            <ui-hstack [divider]="true">
              <div class="demo-item">Left</div>
              <div class="demo-item">Center</div>
              <div class="demo-item">Right</div>
            </ui-hstack>
          </div>
        </div>
      </section>
      
      <!-- Responsive Example -->
      <section class="demo-section">
        <h3>Responsive Behavior</h3>
        <p>The HStack below converts to a VStack on small screens:</p>
        <ui-hstack spacing="lg" [responsive]="true" align="center">
          <div class="demo-item">Item 1</div>
          <div class="demo-item">Item 2</div>
          <div class="demo-item">Item 3</div>
          <div class="demo-item">Item 4</div>
        </ui-hstack>
      </section>
      
      <!-- Nested Example -->
      <section class="demo-section">
        <h3>Nested Stacks</h3>
        <ui-vstack spacing="lg">
          <div class="demo-section-header">Header Section</div>
          <ui-hstack spacing="md" align="start">
            <ui-vstack spacing="sm">
              <div class="demo-item">Left Column</div>
              <div class="demo-item">Item 2</div>
              <div class="demo-item">Item 3</div>
            </ui-vstack>
            <ui-vstack spacing="sm">
              <div class="demo-item">Right Column</div>
              <div class="demo-item">Item B</div>
              <div class="demo-item">Item C</div>
            </ui-vstack>
          </ui-hstack>
          <div class="demo-section-footer">Footer Section</div>
        </ui-vstack>
      </section>
    </div>
  `,
  styleUrl: './stack-demo.component.scss'
})
export class StackDemoComponent {
  spacings = ['xs', 'sm', 'md', 'lg', 'xl'] as const;
  alignments = ['start', 'center', 'end', 'stretch'] as const;
  justifyOptions = ['start', 'center', 'end', 'between', 'around', 'evenly'] as const;
}