import { Component, Input } from '@angular/core';
import { ArrayHelpersService } from '@yourcause/common';
import { AnalyticsService, EventType } from '@yourcause/common/analytics';
import { YCModalComponent } from '@yourcause/common/modals';
export interface SequenceItem {
  id: number;
  sequence: number;
  name: string;
  isDisabledOrInActive: boolean;
}

@Component({
  selector: 'gc-sequence-modal',
  templateUrl: './sequence-modal.component.html',
  styleUrls: ['./sequence-modal.component.scss']
})
export class SequenceModalComponent extends YCModalComponent<SequenceItem[]> {
  @Input() items: SequenceItem[];
  @Input() modalHeader: string;
  @Input() description: string;
  @Input() modalSubHeader: string;
  @Input() nameHeader: string;
  @Input() showStatus = true;
  @Input() supportsAlphaSort = false;

  constructor (
    private analyticsService: AnalyticsService,
    private arrayHelper: ArrayHelpersService
  ) {
    super();
  }

  sortAlpha () {
   const sorted = this.arrayHelper.sort(this.items, 'name');
   this.items = sorted.map((item, index) => {
     return {
       ...item,
       sequence: index + 1
     };
   });
  }

  drop (event: SequenceItem[]) {
    event.forEach((result, index) => {
      result.sequence = index + 1;
    });
    this.items = [
      ...event
    ];
  }

  handleSubmit () {
    this.closeModal.emit(this.items);
    this.analyticsService.emitEvent({
      eventName: 'Submit evaluation order',
      eventType: EventType.Click,
      extras: null
    });
  }

  updateSequence (updatedItem: SequenceItem) {
    const listWithoutUpdatedItem = this.items.filter((result) => {
      return result !== updatedItem;
    });
    listWithoutUpdatedItem.splice(updatedItem.sequence - 1, 0, updatedItem);
    const updatedList = listWithoutUpdatedItem.map((item, index) => {
     return {
       ...item,
       sequence: index + 1
     };
    });
    this.items = updatedList;
  }
}