import { Directive, Injectable, Input, EventEmitter, Output, ElementRef, OnInit, OnDestroy, AfterViewInit, ChangeDetectorRef, HostBinding } from '@angular/core';
import { FarrisScrollSpyService } from './farris-scrollspy.service';
//锚点部分
@Directive({
    selector: '[fScrollSpy]'
})
export class FarrisScrollSpyDirective implements OnInit,AfterViewInit, OnDestroy {
    @Input('fScrollSpy') scrollId: string;
    @Input('fScrollGroup') scrollGroupId: string;
  
    constructor(
      private elementRef: ElementRef,
      private scrollSpy: FarrisScrollSpyService,
    ) {}
  
    public ngOnInit(): void {
      this.elementRef.nativeElement.className+=' f-scrollspy-part';
      if(!this.scrollGroupId){
        this.scrollGroupId = this.scrollSpy.getGroupId();
      }
      //this.scrollSpy.addElement(this.elementRef.nativeElement, this.scrollId,this.scrollGroupId);
    }
    ngAfterViewInit(){
      this.scrollSpy.addElement(this.elementRef.nativeElement, this.scrollId,this.scrollGroupId);
    }
  
    public ngOnDestroy(): void {
      this.scrollSpy.removeElement(this.scrollId, this.scrollGroupId);
    }
  }
//跟随点击
@Directive({
    selector: '[fScrollFollowElement]'
})
export class FscrollFollowElementDirective implements OnInit, OnDestroy {

    //@Input() followId: string;
    @Input('fScrollFollowElement') followId:string;
    @Input('fScrollElement') followGroupId:string;
    constructor(
      private elementRef: ElementRef,
      private scrollSpy: FarrisScrollSpyService,
    ) {}
  
    public ngOnInit(): void {
      if(!this.followGroupId){
        this.followGroupId = this.scrollSpy.getGroupId();
      }
      this.scrollSpy.addFollowElement(this.elementRef.nativeElement, this.followId, this.followGroupId);
    }

    public ngOnDestroy(): void {
      this.scrollSpy.removeFollowElement(this.followId, this.followGroupId);
    }

  }

//监听滚动部分content
@Directive({
    selector: '[fScrollSpyContainer]'
})
export class FscrollSpyContainerDirective implements OnInit,AfterViewInit, OnDestroy {
  
  @Input() fOffset:number;
  @Input('fScrollSpyContainer') fScrollGroupId:string;
  @Output() fScrollChange = new EventEmitter;

  @HostBinding("style.position") position = "relative";

    constructor( 
      private elementRef: ElementRef,
      private scrollSpy: FarrisScrollSpyService,
      private changeDetector: ChangeDetectorRef,
    ) {}
  
    public ngOnInit(): void {
      if(!this.fScrollGroupId){
        this.fScrollGroupId = this.scrollSpy.getGroupId();
      }
      this.elementRef.nativeElement.className+=' f-scrollspy-container';
      this.scrollSpy.addContentElement(this.elementRef.nativeElement, this.fScrollGroupId);
      this.scrollSpy.setOffset(this.fOffset, this.fScrollGroupId);
      this.scrollSpy.updateScrollGroup(this.fScrollGroupId).subscribe((currentSection: string): void => {
        //console.log('111',currentSection);
        console.log('section-group'+currentSection);
          this.fScrollChange.emit(currentSection);

          // this.scrollSpy.setCurrentSectionId(this.fScrollGroupId,currentSection);

          // this.changeDetector.markForCheck();
        });
    }
  
    ngAfterViewInit(){
      // this.scrollSpy.getCurrentSection$(this.fScrollGroupId)
      // .subscribe((currentSection: string): void => {
      //   this.fScrollChange.next(currentSection);
      //   this.changeDetector.markForCheck();
      // });

    }
    public ngOnDestroy(): void {
      this.scrollSpy.removeContentElement(this.fScrollGroupId);
    }

  }