import { Component, Input, OnInit } from '@angular/core';
import { Validators } from '@angular/forms';
import { SpinnerService } from '@core/services/spinner.service';
import { ApplicationAttachmentService } from '@features/application-view/application-attachments/application-attachments.service';
import { MailMergeModalResponse } from '@features/application-view/application-attachments/application-attachments.typing';
import { CommunicationVisibility } from '@features/communications/communications.typing';
import { DocumentTemplateService } from '@features/document-templates/document-template.service';
import { DistributeOptions } from '@features/document-templates/document-template.typing';
import { DocumentTemplatesResolver } from '@features/document-templates/resolvers/document-templates.resolver';
import { EmailService } from '@features/system-emails/email.service';
import { EmailNotificationType } from '@features/system-emails/email.typing';
import { DuplicateCheckValidator, EmailValidator, GenericFile, StepperStep, 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 SelectTemplateFormGroup {
  documentTemplateId: number;
}
interface DistributeFormGroup {
  distributeOptionId: DistributeOptions;
  documentVisibility: CommunicationVisibility;
  applicantCanView: boolean;
  clientEmailTemplateId: number;
  attachments: GenericFile[];
  cc: string[];
  bcc: string[];
}

@Component({
  selector: 'gc-mail-merge-modal',
  templateUrl: './mail-merge-modal.component.html',
  styleUrls: ['./mail-merge-modal.component.scss']
})
export class MailMergeModalComponent extends YCModalComponent<MailMergeModalResponse> implements OnInit {
  @Input() applicationIds: number[];
  @Input() programId: number;
  @Input() isNomination = false;

  emailModalOpen = false;
  selectTemplateFormGroup: TypeSafeFormGroup<SelectTemplateFormGroup>;
  distributeFormGroup: TypeSafeFormGroup<DistributeFormGroup>;
  modalSubHeader = '';
  currentStep = 0;
  submitting = false;
  emailType = EmailNotificationType.MailMerge;
  documentTemplateOptions: TypeaheadSelectOption[] = [];
  steps: StepperStep[] = [{
    label: 'Select template',
    i18nKey: 'CONFIG:textSelectTemplate',
    disabled: false
  }, {
    label: 'Distribute',
    i18nKey: 'CONFIG:textDistribute',
    disabled: true
  }];
  DistributeType = DistributeOptions;
  distributeOptions: TypeaheadSelectOption[] = [{
    label: this.i18n.translate(
      'CONFIG:textSendMailMergePdfAttached',
      {},
      'Send an email containing the merge document as a PDF attachment'
    ),
    value: DistributeOptions.SEND_EMAIL
  }, this.applicationAttachmentService.isPrintJsSupported() ? {
    label: this.i18n.translate(
      'CONFIG:textOpenYourBrowsersPrintFunctionality',
      {},
      'Open your browsers print functionality'
    ),
    value: DistributeOptions.PRINT
  } : undefined, {
    label: this.i18n.translate(
      'common:textDownload',
      {},
      'Download'
    ),
    value: DistributeOptions.DOWNLOAD
  }].filter((item) => !!item);
  isSelectTemplateView = true;
  primaryButtonText: string;
  primaryDisabled = true;

  constructor (
    private formBuilder: TypeSafeFormBuilder,
    private i18n: I18nService,
    private documentTemplateService: DocumentTemplateService,
    private documentTemplateResolver: DocumentTemplatesResolver,
    private spinnerService: SpinnerService,
    private emailService: EmailService,
    private applicationAttachmentService: ApplicationAttachmentService,
    private analyticsService: AnalyticsService
  ) {
    super();
  }

  async ngOnInit () {
    await this.documentTemplateResolver.resolve();
    this.documentTemplateOptions = this.documentTemplateService.documentTemplateOptions;
    this.setModalSubHeader();
    this.setFormGroups();
    this.onStepChange(this.currentStep);
  }

  setModalSubHeader () {
    if (this.applicationIds.length === 1) {
      this.modalSubHeader = (this.i18n.translate(
        this.isNomination ? 'GLOBAL:textNominationID' : 'common:textApplicationId',
        {},
        this.isNomination ? 'Nomination ID' : 'Application ID'
      ) + ': ' + this.applicationIds[0]);
    } else {
      this.modalSubHeader = this.i18n.translate(
        this.isNomination ?
          'GLOBAL:textNominationsSelectedDynamice' :
          'GLOBAL:textApplicationsSelectedDynamic',
        {
          number: this.applicationIds.length
        },
        this.isNomination ?
          '__number__ nominations selected' :
          '__number__ applications selected'
      );
    }
  }

  setFormGroups () {
    this.selectTemplateFormGroup = this.formBuilder.group<SelectTemplateFormGroup>({
      documentTemplateId: [null, Validators.required]
    });
    this.distributeFormGroup = this.formBuilder.group<DistributeFormGroup>({
      distributeOptionId: DistributeOptions.SEND_EMAIL,
      documentVisibility: CommunicationVisibility.ALL_GRANT_MANAGERS,
      applicantCanView: false,
      clientEmailTemplateId: 0,
      attachments: [[]],
       cc: [[], EmailValidator()],
      bcc: [[], EmailValidator()]
    }, {
      validator: [
        DuplicateCheckValidator(
          'cc',
          'bcc'
        )
      ]
    });
  }

  onStepChange (newStep: number) {
    this.currentStep = newStep;
    this.isSelectTemplateView = this.currentStep === 0;
    if (this.isSelectTemplateView) {
      this.primaryButtonText = this.i18n.translate(
        'common:btnNext',
        {},
        'Next'
      );
    } else {
      this.setFinalPrimaryButtonText();
    }
    this.setValidity();
  }

  setFinalPrimaryButtonText () {
    const distributeBy = this.distributeFormGroup.value.distributeOptionId;
    if (distributeBy === DistributeOptions.PRINT) {
      this.primaryButtonText = this.i18n.translate(
        'GLOBAL:textPrint',
        {},
        'Print'
      );
    } else if (distributeBy === DistributeOptions.DOWNLOAD) {
      this.primaryButtonText = this.i18n.translate(
        'common:textDownload',
        {},
        'Download'
      );
    } else {
      this.primaryButtonText = this.i18n.translate(
        'GLOBAL:textSend',
        {},
        'Send'
      );
    }
  }

  setValidity () {
    if (this.isSelectTemplateView) {
      this.primaryDisabled = this.selectTemplateFormGroup.invalid;
      this.steps[1].disabled = this.primaryDisabled;
    } else {
      this.primaryDisabled = this.distributeFormGroup.invalid;
    }
  }

  async onPrimaryClick () {
    if (this.isSelectTemplateView) {
      this.onStepChange(1);
    } else {
      this.submitting = true;
      this.spinnerService.startSpinner();
      this.closeModal.emit({
        ...this.selectTemplateFormGroup.value,
        ...this.distributeFormGroup.value,
        applicationIds: this.applicationIds,
        attachments: await this.emailService.returnIdsFromMixedAttachments(
          this.distributeFormGroup.value.attachments
        )
      });
      this.spinnerService.stopSpinner();
      this.analyticsService.emitEvent({
        eventName: 'Mail merge modal submit',
        eventType: EventType.Click,
        extras: null
      });
    }
  }
}