import {
  ChangeDetectionStrategy,
  Component,
  ContentChild,
  ContentChildren,
  QueryList,
  TemplateRef,
} from '@angular/core';
import { AngularComponentId, ComponentId } from '@mobilize/wms-framework';

/**
 * Angular Component for the AccordionItem.Header Control.
 *
 * @export
 * @class AccordionItemHeaderComponent
 */
@Component({
  selector: 'wm-accordion-item-header',
  templateUrl: './accordion-item-header.component.html',
  styleUrls: ['./accordion-item-header.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
@ComponentId([AngularComponentId.accordionItemHeader])
export class AccordionItemHeaderComponent {
  /**
   * Header Template definition of Component.
   *
   * @type {TemplateRef<any>}
   * @memberof AccordionItemHeaderComponent
   */
  @ContentChildren('headerTemplate', { descendants: false })
  templateList: QueryList<any>;

  /**
   * Get the components template
   *
   * @readonly
   * @type {TemplateRef<any>}
   * @memberof AccordionItemHeaderComponent
   */
  get template(): TemplateRef<any> {
    return this.templateList.first;
  }
  /**
   * Component inside the Header Template.
   *
   * @type {any}
   * @memberof AccordionItemHeaderComponent
   */
  @ContentChild('headerTemplateComponent')
  templateComponent: any;
}