import { bindable, bindingMode, customElement, inlineView, processContent, viewResources } from "aurelia-framework";
import { UIInternal } from "../../utils/ui-internal";
import { MenuItem } from "./menu-item";
import { IMenuItems } from "./ui-menus";

@customElement("ui-menu")
@viewResources(MenuItem)
@inlineView(`<template class="ui-menu"><slot>
  <div if.bind="isLoading" ui-padding="xs" ui-align="center"><ui-svg-icon icon="busy" class="ui-anim--spin"></ui-svg-icon></div>
  <template if.bind="!isLoading && items && items.length">
    <menu-item repeat.for="item of items" item.bind="item" noitems-label.bind="noitemsLabel"></menu-item>
  </template>
  <template if.bind="!isLoading && items && items.length===0">
    <div ui-padding="xs" ui-color="muted" ui-font="sm" innerhtml.bind="noitemsLabel"></div>
  </template>
</slot></template>`)
@processContent((compiler, resources, node, instruction) => {
  instruction.inheritBindingContext = true;
  return true;
})
export class UIMenu {
  @bindable()
  public menuItems: IMenuItems[] | (() => IMenuItems[]);

  @bindable()
  public noitemsLabel: string = "No Menu";

  @bindable({ defaultBindingMode: bindingMode.toView })
  protected items: IMenuItems[];
  protected isLoading = false;

  constructor(protected element: Element) {
  }
  menuItemsChanged() {
    this.loadMenuItems();
  }
  protected attached(): void {
    //this.loadMenuItems();

    UIInternal.queueTask(() => {
      const active = this.element.querySelector(".ui-menu__item__link[data-active='true']");
      if (active) {
        active.scrollIntoView({ block: "center", inline: "nearest" });
      }
    });
  }

  public loadMenuItems() {

    if (isFunction(this.menuItems)) {
      this.isLoading = true;

      const ret = this.menuItems();
      if (ret instanceof Promise) {
        ret.then(items => {
          this.items = items;
          this.isLoading = false;
        });
      } else {
        this.items = ret;
        this.isLoading = false;
      }

    } else if (isArray(this.menuItems)) {
      if (this.items != null) {
        this.items.splice(0);
      }
      else {
        this.items = [];
      }
      this.items.push(...this.menuItems);
    } else {
      this.items = undefined;
    }
  }
}