import { Component, OnInit, Input, OnDestroy } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { NotificationsService } from 'angular2-notifications';
import { map } from 'rxjs/operators';
import { Subscription } 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';

@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 dataService: FoSequenceSubscribeDataService,
  ) {}

  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) {
    //   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;
}