import { Component, OnDestroy, OnInit } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import { ExtendedArray } from '../extensions';
import { Template } from '../models/template.model';
import { TemplateService } from '../services';
import { ErrorStore } from '../stores';
import { RecipientListModel } from './recipientListModel';

@Component({
  selector: 'app-recipients',
  templateUrl: './recipients.component.html',
  styleUrls: ['./recipients.component.css'],
})
export class RecipientsComponent implements OnInit, OnDestroy {
  model = new RecipientListModel();
  loaderHeader = 'Retrieving Data';
  message = 'Please wait a moment while we retrieve your information.';
  subscription: Subscription;

  constructor(private templateService: TemplateService, private errorService: ErrorStore) {}

  ngOnInit() {
    this.loadTemplates();
    console.log('RecipientsComponent loaded');
  }

  ngOnDestroy(): void {
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
  }

  loadTemplates() {
    this.model.isLoading = true;
    this.subscription = this.templateService.getAllTemplates().subscribe((templates) => {
      // gets from cache for fast rendering
      this.configTemplates(templates);
      this.templateService.reloadCache(); // triggers cache to reload from api
    });
  }

  delete(id: string) {
    this.loaderHeader = 'Deleting Recipient';
    this.message = 'Please wait a moment while we delete your recipient.';
    this.model.isLoading = true;
    this.templateService.deleteTemplate(id).subscribe((wasDeleted) => {
      if (!wasDeleted) {
        this.errorService.addError('Error', 'Failed to delete template');
        this.errorService.displayErrors();
        return;
      }
      this.loadTemplates();
    });
  }

  configTemplates(templates: Template[]) {
    const tmp = new ExtendedArray<Template>(templates);
    const grouped = tmp.groupBy('firstCharOfName');
    this.model.groupTitles = Object.keys(grouped);
    this.model.recipientsObj = grouped;
    this.model.isLoading = false;
  }
}