import {
    Component,
    Inject,
    Input,
    OnDestroy,
    OnInit,
    Output,
    ViewChild,
    ElementRef,
    EventEmitter
} from "@angular/core";
import { BHPAccordionComponent } from "./accordion.component";

/**
 * ### BHPAccordion heading
 * Instead of using `heading` attribute on the `accordion-group`, you can use
 * an `accordion-heading` attribute on `any` element inside of a group that
 * will be used as group's header template.
 */
@Component({
    selector: "BHPAccordionPanel",
    template: `
      <div class="accordion-item-header" (click)="toggleOpen($event)" [ngClass]="panelClass">
        <i *ngIf="hasArrow===true" class="accordion-item-header-arrow md-18 fas" [ngClass]="{'fa-angle-right': isOpen===false, 'fa-angle-down': isOpen===true}"></i>
        <div *ngIf="heading">
          {{ heading }}
        </div>
        <ng-content select="[accordion-heading]"></ng-content>
      </div>
      <ng-content></ng-content>`,
    host: {
        class: "accordion-item"
    }
})
export class BHPAccordionPanelComponent implements OnInit, OnDestroy {
    /** Clickable text in accordion's group header, check `accordion heading` below for using html in header */
    @Input() heading: string;

    @Input() hasArrow: boolean = true;

    @Input() panelClass: string;
    /** if <code>true</code> — disables accordion group */
    @Input() isDisabled: boolean;
    /** Emits when the opened state changes */
    @Output() isOpenChange: EventEmitter<boolean> = new EventEmitter();

    @Input()
    get isOpen(): boolean {
        return this._isOpen;
    }

    set isOpen(value: boolean) {
        if (value !== this.isOpen) {
            if (value) {
                this.accordion.closeOtherPanels(this);
            }

            this._isOpen = value;
            Promise.resolve(null).then(() => {
                this.isOpenChange.emit(value);
            });
        }
    }

    protected _isOpen = false;
    protected accordion: BHPAccordionComponent;

    constructor(
        @Inject(BHPAccordionComponent) accordion: BHPAccordionComponent
    ) {
        this.accordion = accordion;
    }

    ngOnInit(): any {
        this.accordion.addGroup(this);
    }

    ngOnDestroy(): any {
        this.accordion.removeGroup(this);
    }

    toggleOpen(event: Event): any {
        if (!this.isDisabled) {
            this.isOpen = !this.isOpen;
        }
    }
}