import { Component, OnInit, Input, OnDestroy } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { NotificationsService } from 'angular2-notifications';
import { map, take, switchMap } from 'rxjs/operators';
import { Subscription, combineLatest } from 'rxjs';
import { FoSharedDataService } from '../../core/fo-shared-data.service';
import { FoSequenceSubscribeDataService } from './data/fo-sequence-subscribe-data.service';
import { SequenceItem } from './data/model/fo-sequence.model';
import { FoSequenceSubscribeApiService } from './data/fo-sequence-subscribe-api.service';
import { FoUnirsonListDataService } from '../fo-unirson-list/data/fo-unirson-list-data.service';
import { foShowErrorNotification } from '../../shared/utils/fo-error-handler';

@Component({
  selector: 'fo-sequence-subscribe-modal',
  templateUrl: './fo-sequence-subscribe-modal.component.html',
  styleUrls: ['./fo-sequence-subscribe-modal.component.scss'],
  providers: [FoSequenceSubscribeApiService]
})
export class FoSequenceSubscribeModalComponent implements OnInit, OnDestroy {
  _subscription = new Subscription();

  FORM_CONTROL_LOCATION = 'FORM_CONTROL_LOCATION';

  @Input() close: Function;

  isSubmitting = false;

  isReviewSequenceEnabled = false;

  sequenceUiItems$ = this.dataService.sequences$.pipe(
    map(sequences =>
      sequences.map(sequence => {
        return {
          ...sequence,
          is_selected: false
        };
      })
    )
  );

  form = new FormGroup({});

  sequenceUiItems: SequenceUiItem[] = [];

  isDataNotAvailable$ = this.dataService.isDataNotAvailable$;


  constructor(
    private notification: NotificationsService,
    private sharedDataService: FoSharedDataService,
    private unirsonListService: FoUnirsonListDataService,
    private dataService: FoSequenceSubscribeDataService,
    private apiService: FoSequenceSubscribeApiService

  ) {}

  ngOnInit() {
    this._subscription.add(
      this.sequenceUiItems$.subscribe(seq => (this.sequenceUiItems = seq))
    );
    this.dataService.fetch();
  }

  toggleSelectSequence(item: SequenceUiItem) {
    item.is_selected = !item.is_selected;
    this.sequenceUiItems = this.sequenceUiItems.map(sequence => {
      if (sequence.sequence_id === item.sequence_id) {
        return {
          ...sequence,
          ...item
        };
      }
      return sequence;
    });
  }

  onSubmit() {
    if (this.isSubmitting) {
      return;
    }
    if (this.form.valid) {
      this.isSubmitting = true;
      combineLatest(
        this.unirsonListService.isAnyUnirsonSelected$,
        this.unirsonListService.selectedSegmentInfo$,
        this.unirsonListService.selectedUnirsonIds$,
        (isAnyUnirsonIdSelected, segmentInfo, unirsonIds) => {
          const payload = {
            tag_id: this.form.value[this.FORM_CONTROL_TAG]
          };
          if (isAnyUnirsonIdSelected) {
            Object.assign(payload, {
              unirson_ids: unirsonIds
            });
          } else {
            Object.assign(payload, {
              segment_info: segmentInfo
            });
          }

          return payload;
        }
      )
        .pipe(
          take(1),
          switchMap(payload => this.apiService.segmentUnTag(payload))
        )
        .subscribe(
          res => {
            this.isSubmitting = false;
            this.notification.success(
              'Success',
              `Tag removed from ${res.count} people.`
            );
            this.close();
          },
          err => {
            this.isSubmitting = false;
            foShowErrorNotification(err, this.notification);
          }
        );
  } else {
      this.notification.error('Not allowed', 'One or more invalid inputs');
    }
    // if (this.isSubmitting) {
    //   return;
    // }
    // if (this.form.valid) {
    //   const payload: CheckInPayload = {
    //     unirson_id: this.unirsonInfo.unirson_id,
    //     location_id: this.form.value[this.FORM_CONTROL_LOCATION],
    //     seq_ids: this.sequenceUiItems
    //       .filter(sequence => sequence.is_selected)
    //       .map(sequence => sequence.sequence_id),
    //     review_seq: this.isReviewSequenceEnabled ? 1 : 0
    //   };
    //   this.isSubmitting = true;
    //   this.apiService.checkIn(payload).subscribe(
    //     res => {
    //       this.isSubmitting = false;
    //       this.close();
    //     },
    //     error => {
    //       this.isSubmitting = false;
    //       foShowErrorNotification(error, this.notification);
    //     }
    //   );
    // } else {
    //   this.notification.error('Not allowed', 'One or more invalid inputs');
    // }
  }

  ngOnDestroy() {
    this._subscription.unsubscribe();
  }
}

export interface SequenceUiItem extends SequenceItem {
  is_selected: boolean;
}