import { bindable, bindingMode, customElement, noView, processContent, children, inlineView, getContextFor, ViewCompiler, ViewResources } from "aurelia-framework";
import { UIButton } from "../../buttons/ui-button";
import { IMenuItem } from "../../menu/ui-menus";
import { BindingEngine, Parser } from 'aurelia-binding';
import { CommonColumn } from "./common-column";

@customElement("ui-table-action")
@inlineView(`
  <template>
    <slot></slot>
  </template>
`)
export class UITableAction extends CommonColumn {
  @children('ui-button')
  public actions: UIButton[] = [];
  @bindable({ defaultBindingMode: bindingMode.toView })
  public theme: string = "primary";
  @bindable({ defaultBindingMode: bindingMode.toView })
  public icon: string = "digi-three-points-vertical";
  @bindable
  public disabledMenuItems: string | boolean | Function = false;
  @bindable
  private useDropdown: boolean = true;

  constructor(element: Element, parser: Parser, viewCompiler: ViewCompiler, viewResources: ViewResources, bindingEngine: BindingEngine) {
    super(element, parser, viewCompiler, viewResources, bindingEngine);
    this.cellAlign = "center";
  }

  public compileTemplate(currentRecord: any): IMenuItem[] {
    let menuItemsBodyCell: any[] = [];
    let actionsFiltered = this.actions.filter(a => a.isVisible(currentRecord));
    this.templateCell = document.createElement("template");
    if (actionsFiltered.length == 1 || (false == this.useDropdown && actionsFiltered.length >= 1)) {
      let buttonsHtml = actionsFiltered.map(button => {
        if (button.label != null) {
          button.element.setAttribute("t", "[title]" + button.label);
        }
        if (button.element.attributes["click.delegate"] == null) {
          var functionName = button.element.attributes["click.call"].value.split("(")[0]
          button.element.setAttribute("click.delegate", functionName + "($this)");
          button.element.removeAttribute("click.call");
        }
        return button.element.outerHTML;
      })
      this.templateCell.innerHTML = buttonsHtml.join('');

    } else if (actionsFiltered.length > 1) {
      this.templateCell.innerHTML =
        `<ui-button disabled.bind="column.disabledMenuItems" icon="\${column.icon}" ui-theme="\${column.theme}" type="tool" menu-items.bind="menuItemsBodyCell" show-caret.bind="false" current.bind="currentRecord"></ui-button>`;
      menuItemsBodyCell.push(...actionsFiltered.map(action => {
        if (action.menuItems == null || action.menuItems?.length == 0) {
          return {
            label: action.label,
            icon: action.icon,

            handler: function (record) {
              (action.element as any).click({ record: record });
            },
            disabled: function () {
              if (typeof (action.disabled) == 'function') {
                return action.disabled(currentRecord);
              } else if (typeof (action.disabled) == 'boolean') {
                return action.disabled;
              }
            },
          }
        }
        else {
          return {
            label: action.label,
            icon: action.icon,
            items: action.menuItems,
            disabled: function () {
              if (typeof (action.disabled) == 'function') {
                return action.disabled(currentRecord);
              } else if (typeof (action.disabled) == 'boolean') {
                return action.disabled;
              }
            },
          }
        }
      }));
    }
    return menuItemsBodyCell;
  }
}