import { Component, OnInit, Input, ElementRef, AfterViewInit, OnDestroy, Directive, TemplateRef, ContentChild, ViewChild, ChangeDetectorRef} from '@angular/core';
import { FarrisScrollSpyService } from './farris-scrollspy.service';
import { Subject } from 'rxjs';
import { getUuid } from './utils';

@Directive({
    selector: '[scrollspyItem]'
  })
  export class ScrollspyItemTemplateDirective {
    constructor(public template: TemplateRef<any>) {}
  }

export interface scrollspyData {
    "id": string,
    "title": string,
    "visible"?: boolean
  }
// 滚动监听列表，显示模式改变，抛出事件结构
interface SpyListFollowTypeChange{
  prev:string,
  next:string
}

@Component({
  selector: 'farris-scrollspy',
  templateUrl:'./farris-scrollspy.component.html',
  styleUrls:[
    './farris-scrollspy.component.scss'
  ]
})
export class ScrollspyComponent implements OnInit,AfterViewInit {

    @ContentChild(ScrollspyItemTemplateDirective, {read: TemplateRef}) scrollspyTemplate: TemplateRef<any>;
    /**滚动数据列表 */
    // @Input() scrollspyData:scrollspyData[];
    /**当前active部分id */
    @Input() currentSectionId:string;
    /**当前滚动所有group */
    @Input() scrollGroupId:string = getUuid();
    /**当前滚动显示样式，默认 side 可选参数 tab、fixedTab */
    private _followType='side';
    // 记录状态改变
    private _emitFollowType:SpyListFollowTypeChange=null;
    @Input() 
    set fFollowType(value:string){
      if(value!==this._followType){
        this._emitFollowType={
          prev:this._followType,
          next:value
        };
        this.changeFollowType();
        this._followType=value;
      }
    }    
    get fFollowType():string{
      return this._followType;
    }

    @Input() sidetabWidth:number = 145;

    @ViewChild("scrollyspyList") scrollyspyListEl;

    _scrollspyData:scrollspyData[];

    @Input()
    set scrollspyData(value){
      if(value){
        this._scrollspyData = value.filter((item) =>{
          if(item.hasOwnProperty('visible') && !item.visible){
            return false
          }
          else{
            return true;
          }
        });
        if(this._scrollspyData && this._scrollspyData.length && !this.currentSectionId ){
          this.currentSectionId = this._scrollspyData[0].id;
        }
        this.scrollSpy.setCurrentSectionIdObj(this.scrollGroupId, this.currentSectionId);
      }
    }
    get scrollspyData(){
      return this._scrollspyData;
    }


    constructor( private elementRef: ElementRef, private scrollSpy: FarrisScrollSpyService,private changeDetector: ChangeDetectorRef, ) { }

    ngOnInit() {
      // if(this.scrollspyData && this.scrollspyData.length && !this.currentSectionId ){
      //   this.currentSectionId = this.scrollspyData[0].id;
      // }
      // this.scrollSpy.setCurrentSectionIdObj(this.scrollGroupId, this.currentSectionId);
      // console.log(this.scrollGroupId);
      this.scrollSpy.setGroupId(this.scrollGroupId);
      this.changeFollowType();
      // 获取当前Section的Id
      this.scrollSpy.getCurrentSectionId(this.scrollGroupId).subscribe((currentId)=>{
        this.currentSectionId = currentId;
        this.scrollSpy.updateScrollSpiesActiveClsName(this.scrollGroupId,currentId);
      });

      // 获取对应Container区域，在滚动时的当前Section的变化
      this.scrollSpy.updateScrollGroup(this.scrollGroupId).subscribe((currentSection: string): void => {

          this.scrollSpy.setCurrentSectionId(this.scrollGroupId,currentSection);
          
        });
    }
    // 改变FollowType时
    changeFollowType(){
      if(this.scrollGroupId&&this._emitFollowType){
        this.scrollSpy.changeGroupIdFollowType(this.scrollGroupId,this._emitFollowType);
        this._emitFollowType=null;
      }
    }
    ngAfterViewInit(): void {
        /**当滚动位置为side时，该组件最近父节点添加relative定位 */
        const parent = this.elementRef.nativeElement.parentElement;
        if(!parent.style.position && parent.style.position !== 'relative' && this.fFollowType === 'side'){
            parent.style.position = 'relative';
        }
        // if(this.scrollspyData && this.scrollspyData.length && this.currentSectionId){
        //   if(this.currentSectionId !== this.scrollspyData[0].id){
        //     console.log(222);
        //     const element = this.scrollyspyListEl.nativeElement.querySelector("#scrollspy-"+this.currentSectionId);
        //     const follow = {
        //       element: element,
        //       id: this.currentSectionId
        //     };
        //     const groupId = this.scrollGroupId ? this.scrollGroupId: 'default';
        //     this.scrollSpy.fScrollFollowClick(groupId,follow);
        //   }
        // }
        
    }

}