import { Component, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { trigger, state, transition, style, animate } from '@angular/animations';
import { SidebarService } from '../services/sidebar.service';

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.css'],
  animations: [
    trigger('slide', [
      state('up', style({height: 0})),
      state('down', style({height: '*'})),
      transition('up <=> down', animate(200))
    ])
  ]

})
export class SidebarComponent implements OnInit {

  singleMenus = [];
  dropDownMenus = [];

  constructor(public translate :TranslateService,private sideBarService: SidebarService) {
    this.singleMenus = this.sideBarService.getSingleMenus();
    this.dropDownMenus = this.sideBarService.getDropDwonMenus();
  }

  ngOnInit() {
  }

  toggle(currentMenu) {
    if (currentMenu.type === 'dropdown') {
      this.singleMenus.forEach(elementSingleTop => {
        if (elementSingleTop === currentMenu) {
          currentMenu.active = !currentMenu.active;
        } else {
          elementSingleTop.active = false;
        }
      });
      this.dropDownMenus.forEach(dropdownMenu => {
        if (dropdownMenu === currentMenu) {
          currentMenu.active = !currentMenu.active;
        } else {
          dropdownMenu.active = false;
        }
      });
    } else if (currentMenu.type === 'single') {
      this.singleMenus.forEach(elementSingleTop => {
        if (elementSingleTop === currentMenu) {
          currentMenu.active = !currentMenu.active;
        } else {
          elementSingleTop.active = false;
        }
      });
      this.dropDownMenus.forEach(element => {
        if (element === currentMenu) {
          currentMenu.active = !currentMenu.active;
        } else {
          element.active = false;
        }
      });
    }
  }

  getState(currentMenu) {
    if (currentMenu.active) {
      return 'down';
    } else {
      return 'up';
    }
  }

}
