import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { FormArray } from '@angular/forms';
import { EmailCommGroup, EmailFrequency, EmailSetupPrefs } from '@features/system-emails/email.typing';
import { SelectOption, TypeSafeFormBuilder } from '@yourcause/common';
import { I18nService } from '@yourcause/common/i18n';

@Component({
  selector: 'gc-email-communication-group',
  templateUrl: './email-communication-group.component.html',
  styleUrls: ['./email-communication-group.component.scss']
})

export class EmailCommunicationGroupComponent implements OnInit {
  @Input() group: EmailCommGroup;
  @Output() onPreferenceChange = new EventEmitter<{
    receiveEmail: boolean;
    frequency: EmailFrequency;
    index: number;
  }>();

  formArray: FormArray;
  receivesEmailOptions: SelectOption[] = [{
    display: this.i18n.translate(
      'common:textYes'
    ),
    value: true
  }, {
    display: this.i18n.translate(
      'common:textNo'
    ),
    value: false
  }];

  constructor (
    private formBuilder: TypeSafeFormBuilder,
    private i18n: I18nService
  ) { }

  ngOnInit () {
    this.formArray = this.formBuilder.array(
      this.group.group.map((email) => {
        return this.formBuilder.group({
          [email.type + 'receiveEmail']: email.receiveEmail,
          [email.type + 'frequency']: email.frequency
        });
      })
    );
  }

  onOptedOutChange (email: EmailSetupPrefs, index: number) {
    const group = this.formArray.at(index);
    const receiveEmail = group.value[email.type + 'receiveEmail'];
    if (receiveEmail) {
      group.get(email.type + 'frequency').setValue(EmailFrequency.WEEKLY);
    }
    this.doChange(email, index);
  }

  doChange (email: EmailSetupPrefs, index: number) {
    const group = this.formArray.at(index);
    const receiveEmail = group.value[email.type + 'receiveEmail'];
    const frequency = group.value[email.type + 'frequency'];
    this.onPreferenceChange.emit({
      index,
      receiveEmail,
      frequency
    });
  }
}