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

@Component({
  selector: 'pages-menu-item',
  templateUrl: 'pages-menu-item.component.html',
  styleUrls: ['pages-menu-item.component.scss', '../pages-menu.component.scss']
})
export class PagesMenuItemComponent {
  @Input() item: any;
  @Input() level: number;
  public toggle=false;

  currentURL:string;
  constructor(private router: Router) {
    
  }


  get children() {
    return this.item?.children?.data;
  }

  ngOnInit(){
    this.currentURL = this.router.url;
    this.toggle = this.current||this.parent;
    this.router.events.subscribe((event:any)=>{        
      if (event.url){
        this.currentURL = event.url;
        this.toggle = this.current||this.parent;
      }      
    })
  }

  get parent(){
    return this.currentURL.startsWith(this.item.link)
  }

  get current(){
    return this.currentURL==this.item.link
  }

  get menuClass(){
    let menuClass = {
      selected: this.toggle
    }
    menuClass['level-'+(this.level+1)] = true;
    return  menuClass
  }

  get itemClass(){
    let itemClass = {
      selected: this.toggle,
      parent: this.parent&&!this.current,
      current: this.current
    }
    itemClass['level-'+(this.level+1)] = true;
    return itemClass
  }
}