import { Component, OnInit, Input, Inject } from '@angular/core';
import { KeycloakService } from 'keycloak-angular';
import { ConstantsService } from 'src/app/shared/constants/constants.service';
import { ResizeContentService } from 'src/app/core/services/resize-service/resize-content.service';
import { UtilService } from 'src/app/core/services/util-service/util.service';
import { IdGeneratorService } from 'src/app/core/services/id-generator.service';
import { DOCUMENT } from '@angular/common';

interface userAttributes {
  firstName: string;
  userType: string;
  companyName: string,
  city: string;
  country: string;
  cityAndCountry : string;
}

@Component({
  selector: 'app-page-profile-info-header',
  templateUrl: './page-profile-info-header.component.html',
  styleUrls: ['./page-profile-info-header.component.scss']
})
export class PageDetailsProfileComponent implements OnInit {

  @Input() entity;
  attributes: userAttributes[] = [];
  inDesktop: boolean;
  welcomeText: string;
  public isLoggedIn: boolean;
  private componentId: string = this.idGenerator.getId();
  
  constructor(
    private keycloakService: KeycloakService,
    public constants: ConstantsService,
    public resize: ResizeContentService,
    private idGenerator: IdGeneratorService,
    public util: UtilService,
    @Inject(DOCUMENT) private doc
  ) { }

  ngOnInit() {

    // Handle responsiveness (mobile/desktop)
    const width = (window.innerWidth || this.doc.documentElement.clientWidth);
    this.inDesktop = this.inDesktopView(width);
    this.resize.registerCallback(this.componentId, () => this.onResize());

    // Get values from SSO
    this.keycloakService.isLoggedIn().then(res => {
      this.isLoggedIn = res;
      if (this.isLoggedIn) {
        this.keycloakService.loadUserProfile(false).then(data => {
          // Push values to list, if undefined place empty strings
          this.attributes.push({
            firstName: data.firstName ? data.firstName : "",
            userType: data['attributes'].user_type ? data['attributes'].user_type.toString().split(' [')[0] : "",
            companyName: data['attributes'].companyName ? data['attributes'].companyName.toString(): "",
            city: data['attributes'].city ? data['attributes'].city.toString() : "",
            country: data['attributes'].country_iso ? data['attributes'].country_iso.toString().split(' [')[0] : "",
            cityAndCountry: data['attributes'].city && data['attributes'].country_iso ?
                            data['attributes'].city.toString() + ", " + data['attributes'].country_iso.toString().split(' [')[0] : "",
          });
        });
      }
    });
    this.setUpFields();
  }

  ngOnDestroy(): void {
    this.resize.destroyCallback(this.componentId);
  }


  onResize() {
    const currentWidth = window.innerWidth;
    this.inDesktop = currentWidth >= this.constants.BOOTSTRAP_BREAKPOINTS.MD;
  }

  // Used for setting fields, currently minimal functionality but might include more later on
  public setUpFields() {
    this.welcomeText = this.util.extract(this.entity, 'H1Title') || '';
  }

  inDesktopView(width: number): boolean {
    return width > this.constants.BOOTSTRAP_BREAKPOINTS.LG;
  }
}