import {CommonModule} from '@angular/common';
import {
  ChangeDetectionStrategy,
  Component,
  ContentChildren,
  EventEmitter,
  HostBinding,
  Input,
  Output,
  QueryList,
  ViewEncapsulation
} from '@angular/core';
import {IconButtonComponent} from '../icon-button/icon-button.component';
import {SidepanelHeaderActionDirective} from './directives/sidepanel-header-action.directive';

@Component({
  selector: 'nj-sidepanel-header',
  templateUrl: './sidepanel-header.component.html',
  styleUrls: ['./sidepanel-header.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  standalone: true,
  imports: [SidepanelHeaderActionDirective, IconButtonComponent, CommonModule]
})
export class SidepanelHeaderComponent {
  @HostBinding('class') private staticClass = 'nj-sidepanel-header';


  /**
   * Title displayed in the header
   */
  @Input() title?: string;


  /**
   * Whether it should display a close icon in the header
   */
  @Input() hasCloseIcon = true;

  /**
   * Emit event when clicking the close icon
   */
  @Output() closeIconClicked = new EventEmitter<MouseEvent>();

  @ContentChildren(SidepanelHeaderActionDirective) protected actions: QueryList<SidepanelHeaderActionDirective>;

  protected get shouldDisplayHeaderActions() {
    return this.hasCloseIcon || this.actions.length;
  }
}