import { Component, ElementRef, Renderer2 } from '@angular/core';
import { NavService } from '../../services/navservice';
import { Menu } from 'smart-webcomponents-angular';
import { Subscription } from 'rxjs';

@Component({
	selector: 'app-main-layout',
	templateUrl: './main-layout.component.html',
	styleUrl: './main-layout.component.scss'
})
export class MainLayoutComponent {
	menuItems!:Menu[];
	menuitemsSubscribe$!:Subscription
	constructor(
	private navServices: NavService,
	private elementRef: ElementRef,private renderer:Renderer2
	) {
	const htmlElement =
	this.elementRef.nativeElement.ownerDocument.documentElement;
	// this.renderer.setAttribute(htmlElement, 'data-nav-layout', 'vertical');
	}
	
	ngOnInit() {

	this.menuitemsSubscribe$ = this.navServices.items.subscribe((items: any) => {
		this.menuItems = items;
	});
	}

	clearNavDropdown() {
	this.menuItems?.forEach((a: any) => {
		a.active = false;
		a?.children?.forEach((b: any) => {
		b.active = false;
		b?.children?.forEach((c: any) => {
			c.active = false;
		});
		});
	});
	}
	clickOnBody() {
	document.querySelector('#responsive-overlay')?.classList.remove('active');
	let html = this.elementRef.nativeElement.ownerDocument.documentElement;
	if (window.innerWidth <= 992) {
		html?.setAttribute('data-toggled', html?.getAttribute('data-toggled') == 'close' ? 'close' : 'close');
	}
	html?.removeAttribute('data-icon-text');


	this.menuItem.active = !this.menuItem.active;

	if(html.getAttribute('data-nav-layout') =='horizontal' && window.innerWidth >= 992){this.clearNavDropdown();}
	}
	menuItem = {
	active: false,
	};

	ngOnDestroy() {
	this.menuitemsSubscribe$.unsubscribe();
	}
}