import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, OnDestroy, OnInit, Output } from '@angular/core';
import { Store } from '@ngrx/store';
import { TargetingAudiencesService } from './targeting-audiences.service';
import { Subject } from 'rxjs';
import { filter, mapTo, skip, switchMap, take, takeUntil } from 'rxjs/operators';
import { AudienceService } from '../audience/audience.service';
import { AppState } from '../../../../app/reducers/index';

@Component({
  selector:        'app-targeting-audiences',
  templateUrl:     'targeting-audiences.html',
  styleUrls:       ['targeting-audiences.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class TargetingAudiencesComponent implements OnInit, OnDestroy {
  destroy$ = new Subject();
  audiences$;
  audienceIndexes$;

  audiences;
  audienceEditIndex;

  @Output() changeAudiences = new EventEmitter();

  editAudience (index) {
    // Order matters! Set index first!
    this.audienceService.setEditAudienceIndex(index);
  }

  updateAudience ({index, audience}) {
    // Order matters! Set index first!
    this.audienceService.setUpdateAudienceIndex(index);
    this.targetingAudiencesService.updateAudience(index, audience);
  }

  ngOnDestroy () {
    this.destroy$.next();
  }

  ngOnInit () {
    this.audiences$       = this._store.pipe(
      TargetingAudiencesService.getModel,
      skip(1)
    );
    this.audienceIndexes$ = this._store.pipe(AudienceService.getModel);

    this.audiences$
        .pipe(
          takeUntil(this.destroy$),
          switchMap((audiences) => {

            this.changeAudiences.emit(audiences);

            return this.audienceIndexes$
                       .pipe(
                         take(1),
                         filter(({editIndex, updateIndex}) => {
                           return editIndex === null && updateIndex === null;
                         }),
                         mapTo(audiences)
                       );
          })
        )
        .subscribe((audiences) => {
          this.audiences = audiences;
          this.changeDetectorRef.markForCheck();
          this.changeDetectorRef.detectChanges();
        });

    this.audienceIndexes$
        .pipe(
          takeUntil(this.destroy$)
        )
        .subscribe(({editIndex}) => {
          this.audienceEditIndex = editIndex;
          this.changeDetectorRef.markForCheck();
          this.changeDetectorRef.detectChanges();
        });
  }

  constructor (private _store: Store<AppState>,
               private changeDetectorRef: ChangeDetectorRef,
               private audienceService: AudienceService,
               private targetingAudiencesService: TargetingAudiencesService) {}
}