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

type StickyPosition = 'top' | 'bottom' | 'left' | 'right';
type StickyOffset = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'none';
type StickyVariant = 'default' | 'header' | 'sidebar' | 'footer' | 'floating' | 'toolbar';
type StickyBackground = 'transparent' | 'surface' | 'surface-secondary' | 'surface-elevated' | 'backdrop';
type StickySize = 'auto' | 'full' | 'content';

@Component({
  selector: 'ui-sticky-layout',
  standalone: true,
  imports: [CommonModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  template: `
    <div 
      [ngClass]="getClasses()"
      [style.z-index]="customZIndex"
      [style.width]="customWidth"
      [style.height]="customHeight"
      [attr.role]="role"
      [attr.aria-label]="ariaLabel">
      
      <ng-content></ng-content>
    </div>
  `,
  styleUrl: './sticky-layout.component.scss'
})
export class StickyLayoutComponent {
  @Input() position: StickyPosition = 'top';
  @Input() variant: StickyVariant = 'default';
  @Input() background: StickyBackground = 'transparent';
  @Input() offset?: StickyOffset;
  @Input() size: StickySize = 'auto';
  @Input() shadow = false;
  @Input() border = false;
  @Input() blur = false;
  @Input() customZIndex?: number;
  @Input() customWidth?: string;
  @Input() customHeight?: string;
  @Input() role?: string;
  @Input() ariaLabel?: string;

  getClasses(): Record<string, boolean> {
    const classes: Record<string, boolean> = {
      'ui-sticky-layout': true,
      [`ui-sticky-layout--${this.position}`]: true,
      [`ui-sticky-layout--${this.size}`]: this.size !== 'auto'
    };

    if (this.variant !== 'default') {
      classes[`ui-sticky-layout--${this.variant}`] = true;
    }

    if (this.background !== 'transparent') {
      classes[`ui-sticky-layout--${this.background}`] = true;
    }

    if (this.offset) {
      classes[`ui-sticky-layout--offset-${this.offset}`] = true;
    }

    if (this.shadow) {
      classes['ui-sticky-layout--shadow'] = true;
    }

    if (this.border) {
      classes['ui-sticky-layout--border'] = true;
    }

    if (this.blur) {
      classes['ui-sticky-layout--blur'] = true;
    }

    return classes;
  }
}