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

export type AppbarVariant = 'compact' | 'standard' | 'large' | 'prominent';
export type AppbarPosition = 'static' | 'fixed' | 'sticky';

export interface AppbarSlots {
  leftIcon?: boolean;
  leftLogo?: boolean;
  leftAvatar?: boolean;
  title?: boolean;
  rightIcon?: boolean;
  rightLogo?: boolean;
  rightAvatar?: boolean;
  rightMenu?: boolean;
}

@Component({
  selector: 'ui-appbar',
  standalone: true,
  imports: [CommonModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
  styleUrls: ['./appbar.component.scss'],
  template: `
    <div 
      class="ui-appbar"
      [class]="getAppbarClasses()"
      [attr.data-variant]="variant"
      [attr.data-position]="position"
      [attr.data-elevated]="elevated"
    >
      @if (slots.leftIcon) {
        <div class="ui-appbar__left-icon" slot="left-icon">
          <ng-content select="[slot=left-icon]"></ng-content>
        </div>
      }

      @if (slots.leftLogo) {
        <div class="ui-appbar__left-logo" slot="left-logo">
          <ng-content select="[slot=left-logo]"></ng-content>
        </div>
      }

      @if (slots.leftAvatar) {
        <div class="ui-appbar__left-avatar" slot="left-avatar">
          <ng-content select="[slot=left-avatar]"></ng-content>
        </div>
      }

      @if (slots.title) {
        <div class="ui-appbar__title" slot="title">
          <ng-content select="[slot=title]"></ng-content>
        </div>
      }

      <div class="ui-appbar__spacer"></div>

      @if (slots.rightIcon) {
        <div class="ui-appbar__right-icon" slot="right-icon">
          <ng-content select="[slot=right-icon]"></ng-content>
        </div>
      }

      @if (slots.rightLogo) {
        <div class="ui-appbar__right-logo" slot="right-logo">
          <ng-content select="[slot=right-logo]"></ng-content>
        </div>
      }

      @if (slots.rightAvatar) {
        <div class="ui-appbar__right-avatar" slot="right-avatar">
          <ng-content select="[slot=right-avatar]"></ng-content>
        </div>
      }

      @if (slots.rightMenu) {
        <div class="ui-appbar__right-menu" slot="right-menu">
          <ng-content select="[slot=right-menu]"></ng-content>
        </div>
      }
    </div>
  `
})
export class AppbarComponent {
  @Input() variant: AppbarVariant = 'standard';
  @Input() position: AppbarPosition = 'static';
  @Input() elevated: boolean = false;
  @Input() slots: AppbarSlots = {
    leftIcon: false,
    leftLogo: false,
    leftAvatar: false,
    title: true,
    rightIcon: false,
    rightLogo: false,
    rightAvatar: false,
    rightMenu: false
  };

  getAppbarClasses(): string {
    const classes: string[] = [];
    
    if (this.elevated) {
      classes.push('ui-appbar--elevated');
    }

    return classes.join(' ');
  }
}