import { Component, OnInit, ContentChild, Renderer, Input, Output, EventEmitter } from '@angular/core';
import { Content, Gesture } from 'ionic-angular'

@Component({
  selector: 'dropdown',
  template: `
  <ng-content></ng-content>
`
})
export class DropdownComponent implements OnInit {
  @ContentChild('dropdownMenu') dropdownMenu
  @ContentChild('dropdownItem') dropdownItem
  @ContentChild('dropdownArrow') dropdownArrow
  @Output() onClick = new EventEmitter()
  @ContentChild(Content) ionicScrollDelegate
  @Input() open:boolean
  menu
  item
  arrow
  @Input() union:boolean
  constructor(public renderer:Renderer) {

  }
  ngOnInit(){

  }

  ngAfterViewInit() {
    this.menu = this.dropdownMenu.nativeElement;
    this.item = this.dropdownItem.nativeElement;
    this.arrow = this.dropdownArrow.nativeElement;

    if(this.open){
      this.renderer.setElementClass(this.menu,'active',true);
      this.renderer.setElementClass(this.item,'active',true);
    }

    const gesture = new Gesture(this.menu);
    gesture.listen();
    gesture.on('tap',() => {
      if(this.onClick) this.onClick.emit();

      if(this.item.classList.contains('active')){
        this.renderer.setElementClass(this.arrow,'active',false);
        this.renderer.setElementClass(this.item,'active',false);
      }else{
        this.renderer.setElementClass(this.arrow,'active',true);
        this.renderer.setElementClass(this.item,'active',true);
      }
    });
  }

}