import { NodeMouseEvent } from '@vue-flow/core';
import { useContextMenu } from '../src/components/RuleChainContextMenu';
import { RuleChainContextMenuItemType } from '../src/components/RuleChainContextMenu/index.type';
import { ElementsTypeEnum } from '../enum';
import { checkHasCacheRuleNode } from './useRuleCopyPaste';

export enum RuleContextMenuEnum {
  DETAIL = 'DETAIL',
  COPY = 'COPY',
  DELETE = 'DELETE',

  SELECT_COPY = 'SELECT_COPY',
  PASTE = 'PASTE',
  UNSELECTED = 'UNSELECTED',
  DELETE_SELECT = 'DELETE_SELECT',
  APPLY_CHANGE = 'APPLY_CHANGE',
  UNDO_CHANGE = 'UNDO_CHANGE',

  SELECT_ALL = 'SELECT_ALL',
}

export enum RuleContextMenuNameEnum {
  DETAIL = '详情',
  COPY = '复制',
  DELETE = '删除',

  SELECT_COPY = '选择副本',
  PASTE = '粘贴',
  UNSELECTED = '取消选择',
  DELETE_SELECT = '删除选定',
  APPLY_CHANGE = '应用更改',
  UNDO_CHANGE = '撤销更改',

  SELECT_ALL = '选择全部',
}

export enum RuleChainContextMenuIconEnum {
  DETAIL = 'material-symbols:menu',
  COPY = 'material-symbols:content-copy',
  DELETE = 'material-symbols:delete',

  SELECT_COPY = 'material-symbols:content-copy',
  PASTE = 'material-symbols:content-paste',
  UNSELECTED = 'material-symbols:tab-unselected',
  DELETE_SELECT = 'material-symbols:close',
  APPLY_CHANGE = 'material-symbols:done',
  UNDO_CHANGE = 'material-symbols:close',

  SELECT_ALL = 'material-symbols:select-all',

  // LINK = 'material-symbols:trending-flat',
}

export enum RuleChainContextMenuShortcutKeyEnum {
  DELETE = 'Ctrl(⌘) X',

  SELECT_COPY = 'Ctrl(⌘) C',
  PASTE = 'Ctrl(⌘) V',
  UNSELECTED = 'Esc',
  DELETE_SELECT = 'Del',
  APPLY_CHANGE = 'Ctrl(⌘) S',
  UNDO_CHANGE = 'Ctrl(⌘) Z',

  SELECT_ALL = 'Ctrl(⌘) A',
}

const getMenuItem = (key: RuleContextMenuEnum, handler: Fn, disabled = false) => {
  return {
    key,
    label: RuleContextMenuNameEnum[key],
    icon: RuleChainContextMenuIconEnum[key],
    shortcutKey: RuleChainContextMenuShortcutKeyEnum[key],
    handler: () => handler?.(key),
    disabled,
  } as RuleChainContextMenuItemType;
};

const getDivider = (): RuleChainContextMenuItemType => ({ divider: true });

export function useCreateRuleChainContextMenu() {
  const [createContextMenu] = useContextMenu();

  const createNodeContextMenu = (params: NodeMouseEvent): Promise<RuleContextMenuEnum | ''> => {
    return new Promise(async (resolve) => {
      await createContextMenu(params, {
        items: [
          getMenuItem(RuleContextMenuEnum.DETAIL, resolve),
          getMenuItem(RuleContextMenuEnum.COPY, resolve),
          getMenuItem(RuleContextMenuEnum.DELETE, resolve),
        ],
      });
      resolve('');
    });
  };

  const createElementsSelectedContextMenu = (
    params: NodeMouseEvent,
    changeMarker: boolean,
    elementsType: ElementsTypeEnum.NODE = ElementsTypeEnum.NODE
  ): Promise<RuleContextMenuEnum | ''> => {
    return new Promise(async (resolve) => {
      await createContextMenu(params, {
        items: [
          ...(elementsType === ElementsTypeEnum.NODE
            ? [getMenuItem(RuleContextMenuEnum.SELECT_COPY, resolve)]
            : []),
          getMenuItem(RuleContextMenuEnum.PASTE, resolve, !checkHasCacheRuleNode()),
          getDivider(),
          getMenuItem(RuleContextMenuEnum.UNSELECTED, resolve),
          getMenuItem(RuleContextMenuEnum.DELETE_SELECT, resolve),
          getDivider(),
          getMenuItem(RuleContextMenuEnum.APPLY_CHANGE, resolve, !changeMarker),
          getMenuItem(RuleContextMenuEnum.UNDO_CHANGE, resolve, !changeMarker),
        ],
      });
      resolve('');
    });
  };

  const createPanelContextMenu = (
    params: NodeMouseEvent,
    changeMarker: boolean
  ): Promise<RuleContextMenuEnum | ''> => {
    return new Promise(async (resolve) => {
      await createContextMenu(params, {
        items: [
          getMenuItem(RuleContextMenuEnum.PASTE, resolve, !checkHasCacheRuleNode()),
          getMenuItem(RuleContextMenuEnum.SELECT_ALL, resolve),
          getMenuItem(RuleContextMenuEnum.APPLY_CHANGE, resolve, !changeMarker),
          getMenuItem(RuleContextMenuEnum.UNDO_CHANGE, resolve, !changeMarker),
        ],
      });
      resolve('');
    });
  };

  const createEdgeContextMenu = (
    params: NodeMouseEvent,
    isInput = false
  ): Promise<RuleContextMenuEnum | ''> => {
    return new Promise(async (resolve) => {
      await createContextMenu(params, {
        items: [
          ...(isInput ? [] : [getMenuItem(RuleContextMenuEnum.DETAIL, resolve)]),
          getMenuItem(RuleContextMenuEnum.DELETE, resolve),
        ],
      });
      resolve('');
    });
  };
  return {
    createNodeContextMenu,
    createElementsSelectedContextMenu,
    createPanelContextMenu,
    createEdgeContextMenu,
  };
}