import {Component, HostListener, OnInit} from '@angular/core';
import {User} from '../../models/user';
import {StorageService} from '../../services/storage.service';
import {Router} from '@angular/router';

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

	showProfilePopOver: boolean = false;
	user?: User;
	initialClickMobileMenu : boolean = true
	dropdownContentStyle! : CSSStyleDeclaration;

	constructor(private router: Router) {
		this.user = StorageService.getUserInfo();
	}

	ngOnInit(): void {
		this.dropdownContentStyle = document.getElementById('menu-mobile-dropdown-content')!.style;
	}

	openProfile(): void {
		this.showProfilePopOver = true;
	}

	closeProfile(): void {
		this.showProfilePopOver = false;
	}




	getUserName(): string {
		return this.user ? this.user.firstName : 'Logged out';
	}

	navigate(path: string): void {
		this.initialClickMobileMenu = true;
		this.router.navigate([path]);
	}

	openMobileDropdown() : void {
		if (!this.isMobileDropdownOpen()) {
			this.dropdownContentStyle.display = 'block';
			this.initialClickMobileMenu = true;
		}
	}

	closeMobileDropdown() : void {
		this.dropdownContentStyle.display = 'none';
		this.initialClickMobileMenu = true;
	}

	isMobileDropdownOpen() : Boolean {
		return this.dropdownContentStyle.display == 'block';
	}

	@HostListener('document:click', ['$event'])
	@HostListener('document:touchstart', ['$event'])
	handleOutsideClick(event: any) {
		if (!document.getElementById("menu-mobile-dropdown-content")!.contains(event.target)) {
			if(this.isMobileDropdownOpen()) {
				if(this.initialClickMobileMenu) {
					this.initialClickMobileMenu = false;
				} else {
					this.closeMobileDropdown();
					console.log("Zu gemacht!")
				}
			}
		}
	}
}