import { throttle } from '@ibizstudio/runtime';
import { IPSDETBUIActionItem } from '@ibizstudio/runtime';
import { ContextMenuBase } from '../../../widgets/contextmenu-base';

/**
 * 上下文菜单部件基类
 *
 * @export
 * @class AppContextMenuBase
 * @extends {ContextMenuBase}
 */
export class AppContextMenuBase extends ContextMenuBase {
  /**
   * 菜单项点击
   *
   * @memberof AppContextMenuBase
   */
  itemClick({ tag }: any) {
    this.ctrlEvent({ controlname: this.controlInstance.name, action: 'contextMenuItemClick', data: tag });
  }

  /**
   * 判断类型
   *
   * @param {*} item
   * @memberof AppContextMenuBase
   */
  renderToolbarItems(item: any) {
    if (item.itemType === 'DEUIACTION') {
      return this.renderUIAction(item);
    } else if (item.itemType === 'SEPERATOR') {
      return <divider />;
    } else if (item.itemType === 'ITEMS') {
      return this.renderItem(item);
    } else if (item.itemType === 'RAWITEM') {
      return <span>{item.rawContent}</span>;
    }
  }

  /**
   * 绘制菜单项
   *
   * @param {*} item
   * @memberof AppContextMenuBase
   */
  renderItem(item: any) {
    return (
      <dropdown placement='right-start'>
        <dropdown-item>
          {this.renderItemIcon(item)}
          {item.showCaption ? item.caption : ''}
          <icon type='ios-arrow-forward'></icon>
        </dropdown-item>
        <dropdown-menu slot='list'>
          {item.getPSDEToolbarItems && item.getPSDEToolbarItems.length > 0
            ? item.getPSDEToolbarItems.map((toolbarItem: any) => {
                return this.renderToolbarItems(toolbarItem);
              })
            : null}
        </dropdown-menu>
      </dropdown>
    );
  }

  /**
   * 绘制界面行为项
   *
   * @param {*} item
   * @memberof AppContextMenuBase
   */
  renderUIAction(item: any) {
    let visible = this.contextMenuActionModel[item.name] ? this.contextMenuActionModel[item.name]?.visabled : true;
    let disabled = this.contextMenuActionModel[item.name] ? this.contextMenuActionModel[item.name]?.disabled : false;
    return (
      <dropdown-item name={item.name} v-show={visible} disabled={disabled}>
        {this.renderItemIcon(item)}
        {item.showCaption ? item.caption : ''}
      </dropdown-item>
    );
  }

  /**
   * 绘制图标
   *
   * @param item
   * @memberof AppContextMenuBase
   */
  renderItemIcon(item: IPSDETBUIActionItem) {
    if (item.showIcon && item.getPSSysImage()) {
      let img = item.getPSSysImage();
      if (img && img.cssClass) {
        return <i class={img.cssClass}></i>;
      }
    }
  }

  /**
   * 绘制
   *
   * @memberof AppContextMenuBase
   */
  render() {
    if (!this.controlIsLoaded) {
      return null;
    }
    const { controlClassNames } = this.renderOptions;
    const getPSDEToolbarItems = this.controlInstance.getPSDEToolbarItems() || [];
    return (
      <dropdown class={{ 'tree-right-menu': true, ...controlClassNames }} trigger='custom' visible={true} on-on-click={($event: any) => throttle(this.itemClick, [{ tag: $event }], this)}>
        <dropdown-menu slot='list'>
          {getPSDEToolbarItems?.map((item: any) => {
            return this.renderToolbarItems(item);
          })}
        </dropdown-menu>
      </dropdown>
    );
  }
}