import { Component, Input, OnInit } from '@angular/core';
import { Validators } from '@angular/forms';
import { TypeaheadSelectOption, TypeSafeFormBuilder, TypeSafeFormGroup } from '@yourcause/common';
import { AnalyticsService, EventType } from '@yourcause/common/analytics';
import { YCModalComponent } from '@yourcause/common/modals';
import { CustomDataTableDetailViewOption, MergeOptionsPayload } from '../custom-data-tables.typing';
interface MergeOptionsFormGroup {
  optionTwoId: number;
  optionIdToKeepValue: number;
}

@Component({
  selector: 'gc-merge-options-modal',
  templateUrl: './merge-options-modal.component.html',
  styleUrls: ['./merge-options-modal.component.scss']
})
export class MergeOptionsModalComponent extends YCModalComponent<
  MergeOptionsPayload
> implements OnInit {
  @Input() picklistId: number;
  @Input() option: CustomDataTableDetailViewOption;
  @Input() allOptions: CustomDataTableDetailViewOption[];

  mergeOptions: TypeaheadSelectOption[] = [];
  valueToKeepOptions: TypeaheadSelectOption[] = [];
  formGroup: TypeSafeFormGroup<MergeOptionsFormGroup>;

  constructor (
    private formBuilder: TypeSafeFormBuilder,
    private analyticsService: AnalyticsService
  ) {
    super();
  }

  ngOnInit () {
    this.formGroup = this.formBuilder.group<MergeOptionsFormGroup>({
      optionTwoId: [null, Validators.required],
      optionIdToKeepValue: [this.option.id, Validators.required]
    });
    this.mergeOptions = this.allOptions.filter((option) => {
      return option.id !== this.option.id;
    }).map((option) => {
      return {
        label: option.value,
        option: `
          <div>
            ${option.value}
          </div>
          <small class="d-block">
            ${option.key}
          </small>
        `,
        value: option.id
      };
    });
  }

  mergeOptionChanged (optionId: number) {
    if (optionId) {
      const found = this.allOptions.find((opt) => {
        return opt.id === optionId;
      });
      if (this.option.value !== found.value) {
        this.valueToKeepOptions = [{
          label: this.option.value,
          value: this.option.id
        }, {
          label: found.value,
          value: optionId
        }];
      } else {
        this.valueToKeepOptions = [];
      }
    } else {
      this.valueToKeepOptions = [];
    }
  }

  onPrimaryClick () {
    this.closeModal.emit({
      picklistId: this.picklistId,
      picklistOptionToKeepId: this.option.id,
      picklistOptionToMergeId: this.formGroup.value.optionTwoId,
      picklistOptionValueToKeepId: this.formGroup.value.optionIdToKeepValue
    });
    this.analyticsService.emitEvent({
      eventName: 'Merge custom data table save',
      eventType: EventType.Click,
      extras: null
    });
  }
}