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 { UserService } from '../../services/user.service';

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

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

	public slugsAvailables: string[] = [];

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

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

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

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