import {Component, ElementRef, EventEmitter, Input, OnChanges, Output, ViewChild} from '@angular/core';
import {Campaign} from '../../../models/model-interfaces';

@Component({
  selector: 'campaign-navigation',
  templateUrl: './campaign-navigation.component.html',
  styleUrls: ['./campaign-navigation.component.css']
})
export class CampaignNavigationComponent implements OnChanges {

  @Input() campaigns: Campaign[];

  @Input() selectedCampaignId;

  @Output() campaignSelect = new EventEmitter();

  @ViewChild('horizontalList', {read: ElementRef}) public panel: ElementRef<any>;

  isLeftScrollVisible = false;

  isRightScrollVisible = true;

  repeater;

  ngOnChanges() {
    this.isRightScrollVisible = this.campaigns.length > 4;
  }

  select(campaign) {
    this.selectedCampaignId = campaign._id;
    this.campaignSelect.emit(campaign);
  }

  public scrollList(scrollValue: number): void {
    const prevScrollLeftValue = this.panel.nativeElement.scrollLeft;

    this.panel.nativeElement.scrollLeft += scrollValue;

    const updatedScrollLeftValue = this.panel.nativeElement.scrollLeft;

    if (scrollValue < 0) {
      this.isRightScrollVisible = true;
    }

    if (updatedScrollLeftValue > 0) {
      if (prevScrollLeftValue === updatedScrollLeftValue) {
        this.isRightScrollVisible = false;
        this.clearRepeater();
      }
      this.isLeftScrollVisible = true;
    } else {
      this.isLeftScrollVisible = false;
      this.clearRepeater();
    }
  }

  setRepeater(value: number) {
    this.repeater = setInterval(() => this.scrollList(value), 20);
  }

  clearRepeater() {
    clearInterval(this.repeater)
  }
}