import "../../../../node_modules/.pnpm/vue@3.3.4/node_modules/vue/dist/vue.runtime.esm-bundler.mjs";
import { useChartEditStore } from "../../../store/modules/chartEditStore/chartEditStore.mjs";
import { renderIcon } from "../../../utils/utils.mjs";
import "../../../../node_modules/.pnpm/crypto-js@4.1.1/node_modules/crypto-js/index.mjs";
import "../../../enums/pageEnum.mjs";
import "../../../router/index.mjs";
import "../../../store/modules/designStore/designStore.mjs";
import { loadingError } from "../../../utils/plugin.mjs";
import "../../../components/GoLoading/index.mjs";
import "../../../../node_modules/.pnpm/vue3-lazyload@0.2.5-beta_a6dezdz3je235ci4e3tu4rayna/node_modules/vue3-lazyload/dist/vue3-lazyload.esm.mjs";
import "../../../components/GoSkeleton/index.vue.mjs";
import { icon } from "../../../plugins/icon.mjs";
import { MenuEnum } from "../../../enums/editPageEnum.mjs";
import cloneDeep from "../../../../node_modules/.pnpm/lodash@4.17.21/node_modules/lodash/cloneDeep.mjs";
import { ref, toRaw } from "../../../../node_modules/.pnpm/@vue_reactivity@3.3.4/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.mjs";
import { nextTick } from "../../../../node_modules/.pnpm/@vue_runtime-core@3.3.4/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.mjs";
const {
  CopyIcon,
  CutIcon,
  ClipboardOutlineIcon,
  TrashIcon,
  ChevronDownIcon,
  ChevronUpIcon,
  LockOpenOutlineIcon,
  LockClosedOutlineIcon,
  EyeOutlineIcon,
  EyeOffOutlineIcon
} = icon.ionicons5;
const { UpToTopIcon, DownToBottomIcon, PaintBrushIcon, Carbon3DSoftwareIcon, Carbon3DCursorIcon } = icon.carbon;
const chartEditStore = useChartEditStore();
const divider = (n = 3) => {
  return {
    type: "divider",
    key: `d${n}`
  };
};
const defaultOptions = [
  {
    label: "锁定",
    key: MenuEnum.LOCK,
    icon: renderIcon(LockClosedOutlineIcon),
    fnHandle: chartEditStore.setLock
  },
  {
    label: "解锁",
    key: MenuEnum.UNLOCK,
    icon: renderIcon(LockOpenOutlineIcon),
    fnHandle: chartEditStore.setUnLock
  },
  {
    label: "隐藏",
    key: MenuEnum.HIDE,
    icon: renderIcon(EyeOffOutlineIcon),
    fnHandle: chartEditStore.setHide
  },
  {
    label: "显示",
    key: MenuEnum.SHOW,
    icon: renderIcon(EyeOutlineIcon),
    fnHandle: chartEditStore.setShow
  },
  {
    type: "divider",
    key: "d0"
  },
  {
    label: "复制",
    key: MenuEnum.COPY,
    icon: renderIcon(CopyIcon),
    fnHandle: chartEditStore.setCopy
  },
  {
    label: "剪切",
    key: MenuEnum.CUT,
    icon: renderIcon(CutIcon),
    fnHandle: chartEditStore.setCut
  },
  {
    label: "粘贴",
    key: MenuEnum.PARSE,
    icon: renderIcon(ClipboardOutlineIcon),
    fnHandle: chartEditStore.setParse
  },
  {
    type: "divider",
    key: "d1"
  },
  {
    label: "置顶",
    key: MenuEnum.TOP,
    icon: renderIcon(UpToTopIcon),
    fnHandle: chartEditStore.setTop
  },
  {
    label: "置底",
    key: MenuEnum.BOTTOM,
    icon: renderIcon(DownToBottomIcon),
    fnHandle: chartEditStore.setBottom
  },
  {
    label: "上移",
    key: MenuEnum.UP,
    icon: renderIcon(ChevronUpIcon),
    fnHandle: chartEditStore.setUp
  },
  {
    label: "下移",
    key: MenuEnum.DOWN,
    icon: renderIcon(ChevronDownIcon),
    fnHandle: chartEditStore.setDown
  },
  {
    type: "divider",
    key: "d2"
  },
  {
    label: "清空剪贴板",
    key: MenuEnum.CLEAR,
    icon: renderIcon(PaintBrushIcon),
    fnHandle: chartEditStore.setRecordChart
  },
  {
    label: "删除",
    key: MenuEnum.DELETE,
    icon: renderIcon(TrashIcon),
    fnHandle: chartEditStore.removeComponentList
  }
];
const defaultMultiSelectOptions = [
  {
    label: "创建分组",
    key: MenuEnum.GROUP,
    icon: renderIcon(Carbon3DSoftwareIcon),
    fnHandle: chartEditStore.setGroup
  },
  {
    label: "解除分组",
    key: MenuEnum.UN_GROUP,
    icon: renderIcon(Carbon3DCursorIcon),
    fnHandle: chartEditStore.setUnGroup
  }
];
const defaultNoItemKeys = [MenuEnum.PARSE, MenuEnum.CLEAR];
const pickOption = (options, pickList) => {
  if (!pickList)
    return options;
  const list = [];
  pickList.forEach((e) => {
    list.push(...options.filter((op) => op.key === e));
  });
  return list;
};
const hideOption = (options, hideList) => {
  if (!hideList)
    return options;
  return options.filter((op) => {
    return hideList.findIndex((e) => e !== op.key) !== -1;
  });
};
const menuOptions = ref([]);
const handleContextMenu = (e, targetInstance, optionsHandle, hideOptionsList, pickOptionsList) => {
  e.stopPropagation();
  e.preventDefault();
  let target = e.target;
  while (target instanceof SVGElement) {
    target = target.parentNode;
  }
  chartEditStore.setTargetSelectChart(targetInstance && targetInstance.id);
  chartEditStore.setRightMenuShow(false);
  if (chartEditStore.getTargetChart.selectId.length > 1) {
    menuOptions.value = defaultMultiSelectOptions;
  } else {
    menuOptions.value = defaultOptions;
  }
  if (!targetInstance) {
    menuOptions.value = pickOption(toRaw(menuOptions.value), defaultNoItemKeys);
  }
  if (hideOptionsList) {
    menuOptions.value = hideOption([...defaultMultiSelectOptions, divider(), ...defaultOptions], hideOptionsList);
  }
  if (pickOptionsList) {
    menuOptions.value = pickOption([...defaultMultiSelectOptions, divider(), ...defaultOptions], pickOptionsList);
  }
  if (optionsHandle) {
    menuOptions.value = optionsHandle(
      cloneDeep(toRaw(menuOptions.value)),
      [...defaultMultiSelectOptions, ...defaultOptions],
      targetInstance
    );
  }
  nextTick().then(() => {
    chartEditStore.setMousePosition(e.clientX, e.clientY);
    chartEditStore.setRightMenuShow(true);
  });
};
const useContextMenu = () => {
  menuOptions.value = defaultOptions;
  const onClickOutSide = () => {
    chartEditStore.setRightMenuShow(false);
  };
  const handleMenuSelect = (key) => {
    chartEditStore.setRightMenuShow(false);
    const targetItem = menuOptions.value.filter((e) => e.key === key);
    menuOptions.value.forEach((e) => {
      if (e.key === key) {
        if (e.fnHandle) {
          e.fnHandle();
          return;
        }
        if (!targetItem)
          loadingError();
      }
    });
  };
  return {
    menuOptions,
    defaultOptions,
    defaultMultiSelectOptions,
    handleContextMenu,
    onClickOutSide,
    handleMenuSelect,
    mousePosition: chartEditStore.getMousePosition
  };
};
export {
  defaultMultiSelectOptions,
  defaultOptions,
  divider,
  useContextMenu
};
