import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { Observable } from 'rxjs';

import { User } from '../../models/user.model';
import { ApiService } from '../../services/api.service';
import { ModalService } from '../../services/modal.service';
import { UserService } from '../../services/user.service';

@Component({
	selector: 'app-header',
	templateUrl: './header.component.html',
	styleUrls: ['./header.component.scss'],
})
export class HeaderComponent implements OnInit {
	@Input() isSidebarOpened: boolean;
	@Output() toggleSidebarEE = new EventEmitter<boolean>();

	public _user: Observable<User> = this.userService.user;

	public slugsAvailables: string[] = [];

	constructor(private userService: UserService, private modalService: ModalService, private apiService: ApiService) {}

	public ngOnInit(): void {
		this.getSlugs();
	}

	public async getSlugs(): Promise<void> {
		this.slugsAvailables = await this.apiService.getAllPollsSlugs();
	}

	public openDialog(): void {
		this.modalService.openSettingsComponent();
	}

	public toggleSidebarOpening(): void {
		this.isSidebarOpened = !this.isSidebarOpened;
		this.toggleSidebarEE.emit(this.isSidebarOpened);
	}
}