import { Component, OnInit, Input, ViewEncapsulation } from '@angular/core';
import { Router } from '@angular/router';
import { DomSanitizer } from '@angular/platform-browser';
import { User } from '../../Models/User';
import { Tenant } from '../../Models/Tenant';
import { MasterLayoutService } from '../../master-layout.service';
import { map, mergeMap, tap, catchError, finalize } from 'rxjs/operators';
import { of } from 'rxjs';

@Component({
  selector: 'app-full-layout',
  templateUrl: './full.component.html',
  styleUrls: ['./assets/scss/style.scss', './full.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class FullComponent implements OnInit {
  @Input()
  userFullName: string;
  @Input()
  userEmail: string;
  @Input()
  tenantId: number;
  @Input()
  tenantCustomerNumber: string;


  user: User = {
    name: 'userFullName',
    email: 'userEmail',
    tenantId: 1,
    tenantUserNumber: 'the number'
  };

  tenant: Tenant = {
    id: 1,
    tenantId: 1,
    tenantName: 'Legal Connect',
    domain: '',
    homeSiteURL: '',
    privacyPolicyURL: 'http://www.rapidlegal.com/privacy-policy',
    endUserTermsOfUseURL: 'https://legalconnect.s3.amazonaws.com/tenantlogos/rapidlegal/docs/EndUserTermsOfService.pdf',
    logo: 'https://legalconnect.s3.amazonaws.com/tenantlogos/legalconnect/legalconnectlogo.png',
    shortLogo: 'L',
    helpFile: '',
    supportPhone: '1-800-Support-phone',
    supportEmail: 'Support@email.com',
    favIcon: 'https://legalconnect.s3.amazonaws.com/tenantlogos/legalconnect/lc_favicon.ico',
    css: 'https://s3.amazonaws.com/website.legalconnect/MasterLayout/assets/colors/blue.css',
  };

  constructor(public sanitizer: DomSanitizer, private masterService: MasterLayoutService) { }

  ngOnInit() {
     this.user = {
      name: this.userFullName,
      email: this.userEmail,
      tenantId: this.tenantId,
      tenantUserNumber: this.tenantCustomerNumber
    };
    this.getTenantInfo(this.user.tenantId).subscribe();
  }


/*  setupUserInfo() {
    return this.masterService.getUserInfo().pipe(
      mergeMap(res => {
        this.user = { ...res };
        console.log('setupUserInfo - User: ' + JSON.stringify({ data: this.user }, null, 4));
        if (this.user && this.user.tenantId) {
         return this.getTenantInfo(this.user.tenantId);
        } else {
         // console.log('No tenant for user ' + (this.user.id ? this.user.id : 'empty'));
        }
      }),
      catchError(err => {
        console.log(JSON.stringify({ Error: err }, null, 4));
        return of();
      }),
      finalize(() => {
        this.addTenantTemplate(this.tenant.css);
        this.addTenantIcon(this.tenant.favIcon);
      })
    ).subscribe();
  } */

  getTenantInfo(tenantId: number) {
    return this.masterService.getTenantInfo(tenantId).pipe(
      map(r => {
        this.tenant = { ...r };
        this.tenant.shortLogo = this.masterService.getTenantSmallLogo(this.tenant.tenantName);
        console.log('setupTenantInfo - Tenant' + JSON.stringify({ data: this.tenant }, null, 4));
      }),
      catchError(err => {
        console.log(JSON.stringify({ Error: err }, null, 4));
        return of();
      }),
      finalize(() => {
        this.addTenantTemplate(this.tenant.css);
        this.addTenantIcon(this.tenant.favIcon);
      })
    );
  }

  addTenantTemplate(css: string) {
    let styleElem = '<link rel="stylesheet" href="';
    if (css) {
       styleElem +=  css + '">';
    } else {
      styleElem +=  'https://s3.amazonaws.com/website.legalconnect/MasterLayout/assets/colors/blue.css">';
    }
    $('head').append(styleElem);
  }

  addTenantIcon(icon: string) {
    let styleElem = '<link rel="icon" type="image/x-icon" sizes="16x16" href="';
    if (icon) {
       styleElem +=  icon + '">';
    } else {
      styleElem +=  'https://legalconnect.s3.amazonaws.com/tenantlogos/legalconnect/lc_favicon.ico">';
    }
    $('head').append(styleElem);
  }
}