/**
  * @author Amal Gupta <amal@webintensive.com>
  *
  * WebAccordion Component is a multilevel accordion component. The number of
  * levels in the accordion are determined by the number of levels in the data
  * passed to the component
  *
  * selector = <web-accordion>
  *
  * Inputs = 
  *	accodionData: the format of the data is: 
	* [{ 
	*		name: 'abc'
	*		level: 1
	*		id: 1
	*		children: [
	*			{
	*				name: 'xyz',
	*				level: 2
	*				id: 11
	*				children: [
	*							...
	*				]
	*			}
	*		]
	*	},
	*	{
	*		...
	*	}]
	* accordionId: DOM Id of the accordion. If unspecified a random Id 
  *              will be assigned.
	*		
  *
  * Output = childData : will emit the data of the node to parent node when clicked.
  */

import { Component,
  Input,
  OnInit,
  trigger,
  style,
  transition,
  animate,
  Output,
  EventEmitter,
  state } from '@angular/core';

/**
 * Monotonically increasing integer used to auto-generate
 * unique ids for editor components.
 */
let nextId = 0;

@Component({
  moduleId: module.id,
  selector: 'web-accordion',
  template: `
  <div class="accordion-main" 
      *ngFor = "let data of accordionData; let i = index" [attr.data-index]="i">
    <div class="accordion-content clearfix word-break" 
      [ngClass]="{'cursor-pointer': data.children, 'active' :data.children && data.showChildren}" 
        (click)="toggleChildren($event, i)"
        [ngStyle]="{'padding-left': data.level * 10 + 'px'}">
        <span>{{data.name}}</span>
        <span *ngIf="data.children && !data.showChildren" class="fa fa-angle-down right accordion-content-icon"></span>
        <span *ngIf="data.children && data.showChildren" class="fa fa-angle-up right accordion-content-icon"></span>
      </div>
      <div id="{{accordionId + '-level-' + data.id}}" class="accordion-children">
        <div [@accordionContent]="data.showChildren ? 'visible' : 'hidden'" *ngIf = "(data.children)" 
          class="accordion-content-wrapper-overflown">
          <web-accordion [accordionData]="data.children"></web-accordion>
        </div>
      </div>
    </div>
  `,
  styleUrls: ['web-accordion.component.css'],
  animations: [
    trigger('accordionContent', [
        state('hidden', style({
            height: '0px'
        })),
        state('visible', style({
            height: '*'
        })),
        // transition when child node is closed.
        transition('visible => hidden', animate('500ms')),
        // transition when child node is opened.
        transition('hidden => visible', animate('500ms'))
    ])
  ]
})

export class 
 implements OnInit {
  @Input() accordionData: any;
  @Input() accordionId: string;

  @Output() childData = new EventEmitter();

  constructor() {
  	// assigning some values to the inputs for preventing future errors
  	// in case user do not provide the values
    this.accordionId = this.accordionId || 'accordion' + nextId++;
    this.accordionData = this.accordionData || [];
  }

  ngOnInit() {
  	// inititaly all the children node will be closed.
    for (let i = 0; this.accordionData && i < this.accordionData.length; i++) {
      this.accordionData[i].showChildren = false;
    }
  }

  toggleChildren(evt: any, i: number) {
  	// stopping eveent propagation so that click event do not effect parent node's status.
    evt.stopPropagation();
    this.accordionData[i].showChildren = !this.accordionData[i].showChildren;
    this.childData.emit(this.accordionData[i]);
  }
}

WebAccordionComponent