import { Component, OnInit, OnDestroy, Inject, HostBinding } from '@angular/core';
import { LabelService } from 'src/app/core/services/label-service/label-service.service';
import { AuthService } from 'src/app/core/services/auth.service';
import { KeycloakService } from 'keycloak-angular';
import { ResizeContentService } from 'src/app/core/services/resize-service/resize-content.service';
import { ConstantsService } from '../constants/constants.service';
import { DOCUMENT } from '@angular/common';
import { IdGeneratorService } from 'src/app/core/services/id-generator.service';
import { AppConfig } from '../../app.config';

@Component({
	selector: '[auth-bar]',
	templateUrl: './auth-bar.component.html',
	styleUrls: ['./auth-bar.component.scss']
})
export class AuthBarComponent implements OnInit, OnDestroy {

	keycloak;
	loginUrl;
	logoutUrl;
	// Login user details
	public userFirstName;
	public isLoggedIn;
	subscriptions = [];

	isDesktop: boolean;

	private logInLabelKey = 'login';
	logInLabel: string;

	private componentId = this.idGenerator.getId();

	@HostBinding('class') get class() { return 'navbar navbar-tools bg-off-white'; }

	constructor(
		public auth: AuthService,
		private labels: LabelService,
		private keycloakService: KeycloakService,
		private resizer: ResizeContentService,
		private constants: ConstantsService,
		private idGenerator: IdGeneratorService,
		@Inject(DOCUMENT) private doc
	) { }

	ngOnInit() {
		this.resizer.registerCallback(this.componentId, () => this.actOnResize());
		this.actOnResize();

		this.labels.getLabel(this.logInLabelKey).then(label => this.logInLabel = label);

		this.subscriptions.push(this.auth.keycloak.subscribe(x => {
			this.keycloak = x;
			this.loginUrl = this.keycloak.createLoginUrl();
			this.logoutUrl = this.keycloak.createLogoutUrl();
		}));


		this.keycloakService.isLoggedIn().then(res => {
			this.isLoggedIn = res;
			if (this.isLoggedIn) {

				this.keycloakService.loadUserProfile(false).then(data => {
					this.userFirstName = `${data['firstName']}`;
				});
				document.cookie = `SKFCOMLOGGEDIN=yes; domain=${AppConfig.settings.cookiesConfig.domain}; path=${AppConfig.settings.cookiesConfig.path}`;
			}
		});
	}

	ngOnDestroy() {
		this.subscriptions.forEach(x => {
			if (x) { x.unsubscribe(); }
		});

		this.resizer.destroyCallback(this.componentId);
	}

	public login() {

		this.keycloakService.login();
		return false;
	}

	public logout() {
		this.userFirstName = '';
		this.keycloakService.logout();

		if (document.cookie.includes('SKFCOMLOGGEDIN=')) {
			document.cookie = `SKFCOMLOGGEDIN=no; domain=${AppConfig.settings.cookiesConfig.domain}; path=${AppConfig.settings.cookiesConfig.path}`;
		}

		return false;
	}

	actOnResize(): void {
		const width = (window.innerWidth || this.doc.documentElement.clientWidth);
		this.isDesktop = width >= this.constants.BOOTSTRAP_BREAKPOINTS.LG;
	}
}