import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
import { CommonModule } from '@angular/common';

export type MenuContainerElevation = 'none' | 'sm' | 'md' | 'lg';
export type MenuContainerSpacing = 'none' | 'xs' | 'sm' | 'md' | 'lg';

@Component({
  selector: 'ui-menu-container',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [CommonModule],
  template: `
    <div 
      class="menu-container"
      [class]="getContainerClasses()"
      role="menu"
      [attr.aria-label]="ariaLabel"
      [attr.aria-orientation]="orientation"
    >
      <ng-content></ng-content>
    </div>
  `,
  styleUrls: ['./menu-container.component.scss']
})
export class MenuContainerComponent {
  @Input() elevation: MenuContainerElevation = 'sm';
  @Input() spacing: MenuContainerSpacing = 'xs';
  @Input() scrollable = false;
  @Input() maxHeight?: string;
  @Input() rounded = true;
  @Input() dense = false;
  @Input() orientation: 'vertical' | 'horizontal' = 'vertical';
  @Input() ariaLabel?: string;

  getContainerClasses(): string {
    const classes = [
      `menu-container--elevation-${this.elevation}`,
      `menu-container--spacing-${this.spacing}`,
      `menu-container--${this.orientation}`
    ];

    if (this.scrollable) classes.push('menu-container--scrollable');
    if (this.dense) classes.push('menu-container--dense');
    if (this.rounded) classes.push('menu-container--rounded');
    if (this.maxHeight) classes.push('menu-container--max-height');

    return classes.join(' ');
  }
}