import { Component, Input, OnInit } from '@angular/core';
import { CharityBucket } from '@core/typings/charity-buckets.typings';
import { CharityBucketsService } from '@features/charity-buckets/charity-buckets.service';
import { TypeaheadSelectOption, TypeSafeFormBuilder, TypeSafeFormGroup } from '@yourcause/common';
import { AnalyticsService, EventType } from '@yourcause/common/analytics';
import { I18nService } from '@yourcause/common/i18n';
import { YCModalComponent } from '@yourcause/common/modals';
interface CharityFormGroup {
  charityBucket: CharityBucket;
  allowAddOrg: boolean;
  orgSearchGuidelines: string;
}

@Component({
  selector: 'gc-charity-buckets-modal',
  templateUrl: './charity-buckets-modal.component.html',
  styleUrls: ['./charity-buckets-modal.component.scss']
})
export class CharityBucketsModalComponent extends YCModalComponent<CharityFormGroup> implements OnInit {
  @Input() charityBucket: CharityBucket;
  @Input() charityBucketDescriptions: string;
  @Input() allowAddOrg = false;

  descriptionHelpText = this.i18n.translate(
    'GLOBAL:textBucketDescriptionHelp',
    {},
    'Let applicants know about program guidelines around organization search restrictions.'
  );
  formGroup: TypeSafeFormGroup<CharityFormGroup>;
  charityBucketOptions: TypeaheadSelectOption<CharityBucket>[] = [];
  charityBuckets = this.charityBucketsService.charityBuckets;

  constructor (
    private formBuilder: TypeSafeFormBuilder,
    private i18n: I18nService,
    private charityBucketsService: CharityBucketsService,
    private analyticsService: AnalyticsService
  ) {
    super();
  }

  ngOnInit () {
    this.charityBuckets.forEach((bucket) => {
      this.charityBucketOptions.push({
        label: bucket.name,
        value: bucket
      });
    });
    this.formGroup = this.formBuilder.group<CharityFormGroup>({
      charityBucket: this.charityBucket ? this.charityBuckets.find((bucket) => bucket.bucketId === this.charityBucket.bucketId) : null,
      allowAddOrg: this.allowAddOrg,
      orgSearchGuidelines: this.charityBucketDescriptions || ''
    });
  }

  onCancel () {
    this.closeModal.emit();
  }

  submit () {
    this.closeModal.emit(this.formGroup.value);
    this.analyticsService.emitEvent({
      eventName: 'Charity buckets save',
      eventType: EventType.Click,
      extras: null
    });
  }
}