import { Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material';
import { SignInDialogComponent } from '@common/modules/sign-in-dialog/sign-in-dialog.component';

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

  constructor(public dialog: MatDialog) {

  }

  ngOnInit() {
	this.navbarCollapse();
	window.addEventListener('scroll', this.scroll, true);
  }

  ngOnDestroy() {
	window.removeEventListener('scroll', this.scroll, true);
  }

  public toggleClass(ids, option) {
	ids.forEach(id => {
		var element = document.getElementById(id);
		var className = element.getAttribute("class").replace(/ .*/, '');
		console.log(className);
		if (id === option) {
			element.classList.replace(className, "selected");
		} else {
			element.classList.replace(className, "not-selected");
		}
	})
  }

  public navbarCollapse() {
    var element = document.getElementById('nav');
    if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
        element.classList.add("navbar-shrink");
        element.classList.add("fixed-top");
    } else {
        element.classList.remove("navbar-shrink");
        element.classList.remove("fixed-top");
    }
  };

  scroll = (event): void => {
	this.navbarCollapse();
  };

  public openSignInDialog(): void {
    const dialogRef = this.dialog.open(SignInDialogComponent);

    dialogRef.afterClosed().subscribe(result => {
      console.log(`Dialog result: ${result}`);
    });
  }

}