import { ServiceBase } from './../../data/service-base';
import { bindingMode } from "aurelia-binding";
import { bindable, customElement } from "aurelia-templating";
import breeze from 'breeze-client';

@customElement("ui-accordeon-item")
export class UIAccordeonItem {
    @bindable()
    public title: string;

    @bindable()
    public icon: string;

    @bindable({ defaultBindingMode: bindingMode.twoWay })
    protected expandable: boolean = true;
    @bindable({ defaultBindingMode: bindingMode.twoWay })
    public expanded: boolean = false;

    @bindable()
    public onExpanded: () => Promise<any>;

    @bindable()
    public service: ServiceBase<breeze.Entity>;

    @bindable()
    public entities: Array<breeze.Entity>;

    @bindable()
    public showCounter: boolean;

    @bindable()
    public counter: number;

    @bindable()
    public callServiceGetEntities: boolean = true;

    public isLoading: boolean = false;

    private currentItem: any;

    public bind() {
        if (this.service != null || this.onExpanded != null) {
            if (this.service != null) {
                if (this.showCounter == null) this.showCounter = true;
                if (this.showCounter && this.counter == null) {
                    this.setCount();
                }
                this.isLoading = true;
                if (this.onExpanded == null) {
                    this.onExpanded = async () => {
                        if (this.callServiceGetEntities) {
                            return this.service.getEntitiesFromDataSource().then(_ => { this.isLoading = false; });
                        }
                        else {
                            this.isLoading = false;
                        }
                    }
                }
                else {
                    let oldOnExpanded = this.onExpanded;
                    this.onExpanded = async () => {
                        return oldOnExpanded();
                    }
                }

                if (this.expanded) {
                    this.fetchData();
                }
            }
        }
        if (this.showCounter == null) this.showCounter = false;
    }

    public async expandedChanged(newValue, oldValue) {
        if (newValue != oldValue && newValue) {
            if (this.currentItem.parentElement.classList.value.includes("ui-accordeon-horizontal")) {
                this.currentItem.parentElement.getElementsByTagName("ui-accordeon-item").forEach((item) => {
                    if ((item as HTMLElement).getElementsByClassName("ui-accordeon-item__header")[0].classList.value.includes("expanded")) {
                        item.au['ui-accordeon-item'].viewModel.expanded = false
                    }
                })
            }
            this.fetchData();
        }
    }

    protected toggleExpand(expand: boolean): void {
        this.expanded = expand;
    }

    public fetchData() {
        if (this.onExpanded) {
            this.isLoading = true;
            this.onExpanded().then(() => { this.isLoading = false; });
        }
    }

    public setCount() {
        this.service.getCount(this.service.gridDataSource.predicates, this.service.gridDataSource.queryParameters)
            .then(result => { this.counter = result; })
            .catch(_ => { this.counter = 0; });
    }

    public async refresh() {
        if (this.expanded) {
            this.fetchData();
        }
        else if (this.showCounter) {
            this.setCount();
        }
    }
}