import { Component, Input, OnInit } from '@angular/core';
import { SafeUrl } from '@angular/platform-browser';
import 'rxjs/add/operator/filter';
import { filter } from '../../../../../node_modules/rxjs/operators';
import { TemplateType } from '../../../enums/template-type.enum';
import { Template } from '../../../models';
import { TemplateService } from '../../../providers';
import { FILogoService } from '../../../providers/services/fi-logo.service';

@Component({
  selector: 'app-template-label',
  templateUrl: './template-label.component.html',
  styleUrls: ['./template-label.component.css']
})
export class TemplateLabelComponent implements OnInit {
  template: Template;
  @Input()
  id: string;
  @Input()
  type: TemplateType = TemplateType.Debit;
  logoUrl: SafeUrl;
  constructor(
    private templateService: TemplateService,
    private logoService: FILogoService
  ) {}

  ngOnInit() {
    this.templateService.templates$
      .pipe(
        filter(
          templates =>
            templates !== null &&
            templates !== undefined &&
            templates.length > 0
        )
      )
      .subscribe(templates => {
        const template = templates.filter(t => t.id === this.id)[0];
        if (template === null || template === undefined) {
          return;
        }
        this.template = template;
        this.getLogo();
      });
  }

  private getLogo() {
    if (
      this.template.accountCategory === null ||
      this.template.accountCategory === undefined ||
      this.template.accountCategory !== 'CustomerEntered'
    ) {
      return;
    }
    const routingNumber = this.template.routingNumber;
    if (
      routingNumber === null ||
      routingNumber === undefined ||
      routingNumber.length !== 9
    ) {
      return;
    }
    this.logoService.getlogo(routingNumber).subscribe(url => {
      this.logoUrl = url;
    });
  }
}