import { Component, OnInit, ContentChild, HostBinding, Input} from '@angular/core';
import { FooterHeaderDirective} from './directive/footer-header.directive';
import { FooterHeaderToolbarExtendDirective } from './directive/footer-header-toolbar-extend.directive';
import { FooterHeaderContentDirective } from './directive/footer-header-content.directive';
import { FooterHeaderToolbarDirective } from './directive/footer-header-toolbar.directive';
import { LocaleService } from '@farris/ui-locale';
@Component({
  selector: 'farris-footer',
  template: `
   <footer class="f-cmp-footer-container">
      <ng-container *ngIf="showHeader&&headerDirective">
          <header class="f-cmp-footer-header" [ngClass]="headerDirective.extendCls">
              <ng-template  [ngTemplateOutlet]="headerDirective.templateRef"></ng-template> 
          </header>
      </ng-container>
      <ng-container *ngIf="showHeader&&!headerDirective">
        <header class="f-cmp-footer-header" [ngClass]="headerCls">
          <div class="f-content" *ngIf="headerContentDirective" [ngClass]="headerContentDirective.extendCls">
            <ng-template [ngTemplateOutlet]="headerContentDirective.templateRef"></ng-template> 
          </div>
          <ng-container *ngIf="headerToolbarDirective">
              <div class="f-toolbar" [ngClass]="headerToolbarDirective.extendCls">
                  <ng-template  [ngTemplateOutlet]="headerToolbarDirective.templateRef"></ng-template> 
              </div>
          </ng-container>
          <div class="f-toolbar" *ngIf="!headerToolbarDirective">
            <ng-template *ngIf="headerToolbarExtendDirective" [ngTemplateOutlet]="headerToolbarExtendDirective.templateRef"></ng-template> 
            <div class="toolbar--collapse" *ngIf="enableAccordion" (click)="expadnOrCollapse($event)">
                <span class="toobar--collapse-text">
                   <ng-container  *ngIf="collapseStatus">{{textCollapse}}</ng-container>
                   <ng-container  *ngIf="!collapseStatus">{{textExpand}}</ng-container>
                </span>              
                <i class="f-icon toolbar--collapse-icon"></i>
            </div>
          </div>
        </header>
      </ng-container> 
      <div class="f-cmp-footer-content" [ngClass]="contentCls">
        <ng-content></ng-content>
      </div>
   </footer>
  `,
  styles: []
})
export class FooterComponent implements OnInit {
  @HostBinding('class.f-cmp-footer') cls = true;
  // 展开
  @HostBinding('class.f-state-collapse') get getCollapseCls(): boolean {
    if (this.enableAccordion) {
      return this.collapseStatus;
    } else {
      return false;
    }
  }
  // 启用展开收起
  @HostBinding('class.f-cmp-footer-accordion') get enableAccordionCls(): boolean {
    return this.enableAccordion;
  }
  textCollapse=this.localeService.getValue('footer.collapseText');
  // 收起文字
  @Input() 
  set collapseText(value){
    if(value){
      this.textCollapse=value;
    }
  } 
  get collapseText(){
    return this.textCollapse;
  }
  textExpand= this.localeService.getValue('footer.expandText');
  // 展开文字
  @Input()
  set expandText(value){
    if(value){
      this.textExpand=value;
    }
  } 
  get expandText(){
    return this.textExpand;
  }
  // 显示头部区域
  @Input() showHeader = true;
  // 没有用模板单独定义class
  @Input() headerCls = "";
  // 单独定义主内容区的class
  @Input() contentCls = "";
  // 展开状态
  @Input() collapseStatus = true;
  // 是否启用展开收起
  @Input() enableAccordion = true;
  // 头部模板
  @ContentChild(FooterHeaderDirective) headerDirective: any;
  // 头部主内容模板
  @ContentChild(FooterHeaderContentDirective) headerContentDirective: any;
  // Header Toolbar扩展模板
  @ContentChild(FooterHeaderToolbarExtendDirective) headerToolbarExtendDirective: any;
  // Header Toolbar模板
  @ContentChild(FooterHeaderToolbarDirective) headerToolbarDirective: any;
  constructor(private localeService: LocaleService) { }

  ngOnInit() {

  }
  // 收起还是展开
  expadnOrCollapse(ev: Event) {
    ev && ev.stopImmediatePropagation();
    this.collapseStatus = !this.collapseStatus;
  }
}