import { ref, nextTick, toRaw } from 'vue';
import { useChartEditStore } from '@/store/modules/chart/chartEditStore';
import { loadingError } from '../utils/chart-util';
import { cloneDeep } from 'lodash-es';
import {
  LockOutlined,
  UnlockOutlined,
  EyeInvisibleOutlined,
  EyeOutlined,
  CopyOutlined,
  ScissorOutlined,
  SnippetsOutlined,
  VerticalAlignTopOutlined,
  VerticalAlignBottomOutlined,
  UpOutlined,
  DownOutlined,
  ClearOutlined,
  DeleteOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined
} from '@ant-design/icons-vue';

/**
 * 分割线
 * @param {number} n > 2
 * @returns
 */
export const divider = (n = 3) => {
  return {
    type: 'divider',
    key: `d${n}`
  };
};

// * 默认单组件选项
function defaultOptions() {
  const chartEditStore = useChartEditStore();
  return [
    {
      label: '锁定',
      key: 'lock',
      icon: LockOutlined,
      fnHandle: chartEditStore.setLock
    },
    {
      label: '解锁',
      key: 'unLock',
      icon: UnlockOutlined,
      fnHandle: chartEditStore.setUnLock
    },
    {
      label: '隐藏',
      key: 'hide',
      icon: EyeInvisibleOutlined,
      fnHandle: chartEditStore.setHide
    },
    {
      label: '显示',
      key: 'show',
      icon: EyeOutlined,
      fnHandle: chartEditStore.setShow
    },
    {
      type: 'divider',
      key: 'd0'
    },
    {
      label: '复制',
      key: 'copy',
      icon: CopyOutlined,
      fnHandle: chartEditStore.setCopy
    },
    {
      label: '剪切',
      key: 'cut',
      icon: ScissorOutlined,
      fnHandle: chartEditStore.setCut
    },
    {
      label: '粘贴',
      key: 'parse',
      icon: SnippetsOutlined,
      fnHandle: chartEditStore.setParse
    },
    {
      type: 'divider',
      key: 'd1'
    },
    {
      label: '置顶',
      key: 'yop',
      icon: VerticalAlignTopOutlined,
      fnHandle: chartEditStore.setTop
    },
    {
      label: '置底',
      key: 'bottom',
      icon: VerticalAlignBottomOutlined,
      fnHandle: chartEditStore.setBottom
    },
    {
      label: '上移',
      key: 'up',
      icon: UpOutlined,
      fnHandle: chartEditStore.setUp
    },
    {
      label: '下移',
      key: 'down',
      icon: DownOutlined,
      fnHandle: chartEditStore.setDown
    },
    {
      type: 'divider',
      key: 'd2'
    },
    {
      label: '清空剪贴板',
      key: 'clear',
      icon: ClearOutlined,
      fnHandle: chartEditStore.setRecordChart
    },
    {
      label: '删除',
      key: 'delete',
      icon: DeleteOutlined,
      fnHandle: chartEditStore.removeComponentList
    }
  ]
};

// * 默认多选组件选项
function defaultMultiSelectOptions() {
  const chartEditStore = useChartEditStore();
  return [
    {
      label: '创建分组',
      key: 'group',
      icon: MenuUnfoldOutlined,
      fnHandle: chartEditStore.setGroup
    },
    {
      label: '解除分组',
      key: 'unGroup',
      icon: MenuFoldOutlined,
      fnHandle: chartEditStore.setUnGroup
    }
  ]
};

// * 无数据传递拥有的选项
const defaultNoItemKeys = ['parse', 'clear'];

/**
 * * 挑选选项
 * @param options
 * @param pickList
 * @returns
 */
const pickOption = (options, pickList) => {
  if (!pickList) return options;
  const list = [];
  pickList.forEach(e => {
    list.push(...options.filter(op => op.key === e));
  });
  return list;
};

/**
 * * 去除选项
 * @param options
 * @param hideList
 * @returns
 */
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
) => {
  const chartEditStore = useChartEditStore();
  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);
  });
};

/**
 * * 右键hook
 * @param menuConfig
 * @returns
 */
export const useContextMenu = () => {
  const chartEditStore = useChartEditStore();
  // 设置默认项
  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();
      }
    });
  };


  function getPosition() {
    const chartEditStore = useChartEditStore();
    return chartEditStore.getMousePosition;
  }

  return {
    menuOptions,
    defaultOptions,
    defaultMultiSelectOptions,
    handleContextMenu,
    onClickOutSide,
    handleMenuSelect,
    mousePosition: getPosition()
  };
};
