D-Net

import {

  Component,

  ElementRef,

  EventEmitter,

  Input,

  OnChanges,

  OnInit,

  Output,

  SimpleChanges,

  ViewChild

} from "@angular/core";

import {ResultLandingInfo} from "../../utils/entities/resultLandingInfo";

import {EnvProperties} from "../../utils/properties/env-properties";

import {FormArray, FormBuilder, FormGroup, Validators} from "@angular/forms";

import {AlertModal} from "../../utils/modal/alert";

import {HelperFunctions} from "../../utils/HelperFunctions.class";

import {OrganizationInfo} from "../../utils/entities/organizationInfo";

import {ProjectInfo} from "../../utils/entities/projectInfo";

import {DataProviderInfo} from "../../utils/entities/dataProviderInfo";

import {EmailService} from "../../utils/email/email.service";

import {Composer} from "../../utils/email/composer";

import {Subscriber} from "rxjs";

@Component({

  selector: 'feedback',

  templateUrl: 'feedback.component.html'

})

export class FeedbackComponent implements OnInit, OnChanges {

  @ViewChild('feedback') feedback: ElementRef;

  @ViewChild('backModal') backModal: AlertModal;

  @Input() showForm: boolean = false;

  @Input() resultLandingInfo: ResultLandingInfo = null;

  @Input() organizationInfo: OrganizationInfo = null;

  @Input() projectInfo: ProjectInfo = null;

  @Input() dataProviderInfo: DataProviderInfo = null;

  @Input() title: string = null;

  @Input() properties: EnvProperties = null;

  @Input() entityType: string = null;

  @Input() fields: string[] = [];

  @Output() show: EventEmitter<boolean> = new EventEmitter<boolean>();

  public sending: boolean = false;

  public sent: boolean = false;

  public error: boolean = false;

  public form: FormGroup;

  public url: string = null;

  public recipients: string[] = [];

  subscriptions =[];

  constructor(private fb: FormBuilder,

              private emailService: EmailService) {

  }

  ngOnDestroy() {

    this.subscriptions.forEach(subscription => {

      if (subscription instanceof Subscriber) {

        subscription.unsubscribe();

      }

    });

  }

  ngOnInit(): void {

    if(typeof window !== "undefined") {

     this.url = window.location.href;

    }

    if(this.resultLandingInfo) {

      this.title = this.resultLandingInfo.title;

    } else if(this.organizationInfo) {

      this.title = this.organizationInfo.title.name;

    } else if(this.dataProviderInfo) {

      this.title = this.dataProviderInfo.title.name;

    }

    this.recipients = [this.properties.feedbackmail];

    this.init();

  }

  ngOnChanges(changes: SimpleChanges): void {

    if(changes.showForm) {

      this.init();

    }

  }

  init() {

    this.sent = false;

    this.form = this.fb.group({

      name: this.fb.control(this.title),

      url: this.fb.control(this.url),

      email: this.fb.control('', Validators.email),

      issues: this.fb.array([], Validators.required),

      recaptcha: this.fb.control('', Validators.required),

    });

    this.addIssue();

  }

  public addIssue() {

    let issue: FormGroup = this.fb.group({

      field: this.fb.control('', Validators.required),

      report: this.fb.control('', Validators.required)

    });

    this.issues.push(issue);

  }

  public removeIssue(index: number) {

    this.issues.removeAt(index);

  }

  public get issues(): FormArray {

    return <FormArray>this.form.get('issues');

  }

  changeShowForm(value: boolean) {

    this.show.emit(value);

    HelperFunctions.scroll();

  }

  public openBackModal() {

    this.backModal.alertTitle = 'Go back to ' + this.entityType + '\'s page';

    this.backModal.message = 'All changes will be deleted. Are you sure you want to proceed?';

    this.backModal.okButtonText = 'Yes';

    this.backModal.cancelButtonText = 'No';

    this.backModal.open();

  }

  public handleRecaptcha(captchaResponse: string) {

    this.form.get('recaptcha').setValue(captchaResponse);

  }

  public sendReport() {

    this.sending = true;

    this.subscriptions.push(this.emailService.contact(this.properties,

      Composer.composeEmailForFeedback(this.form.value, this.recipients), this.form.get('recaptcha').value).subscribe(sent => {

      this.error = !sent;

      if(sent) {

        if(this.form.get('email').value !== '') {

          this.subscriptions.push(this.emailService.contact(this.properties,

            Composer.composeEmailForUserAfterFeedback([this.form.get('email').value])).subscribe(sent => {

              if(sent) {

                //console.log('An email has been sent to user ' + this.form.get('email').value);

              }

          }));

        }

        this.init();

        this.sent = true;

      }

      this.sending = false;

    }, error => {

      console.log(error);

      this.error = true;

      this.sending = false;

    }));

  }

}