function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
import React, { useCallback, useMemo } from 'react';
import PisellDropSort from "../pisellDropSort";
import PisellTags from "../pisellTags";
import Icon from "../icon";
import Button from "../button";
import { getText } from "../../locales";
import { Dropdown } from 'antd';
import PisellEmpty from "../pisellEmpty";
import { formatTree } from "./utils";
import "./PisellNavigationMenu.less";
var PisellNavigationMenu = function PisellNavigationMenu(_ref) {
  var _ref$value = _ref.value,
    value = _ref$value === void 0 ? [] : _ref$value,
    _ref$allowDrag = _ref.allowDrag,
    allowDrag = _ref$allowDrag === void 0 ? true : _ref$allowDrag,
    _ref$allowDelete = _ref.allowDelete,
    allowDelete = _ref$allowDelete === void 0 ? true : _ref$allowDelete,
    _ref$allowAddChild = _ref.allowAddChild,
    allowAddChild = _ref$allowAddChild === void 0 ? true : _ref$allowAddChild,
    _ref$allowAddRoot = _ref.allowAddRoot,
    allowAddRoot = _ref$allowAddRoot === void 0 ? true : _ref$allowAddRoot,
    _ref$disabled = _ref.disabled,
    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
    _ref$spacing = _ref.spacing,
    spacing = _ref$spacing === void 0 ? 8 : _ref$spacing,
    _ref$maxLevel = _ref.maxLevel,
    maxLevel = _ref$maxLevel === void 0 ? 3 : _ref$maxLevel,
    style = _ref.style,
    className = _ref.className,
    onChange = _ref.onChange,
    onAddSubMenu = _ref.onAddSubMenu,
    onAddPage = _ref.onAddPage,
    onEdit = _ref.onEdit,
    onDelete = _ref.onDelete,
    __designMode = _ref.__designMode,
    title = _ref.title;
  // 将DropSortItem转换回NavigationMenuItem
  var convertToNavigationItems = function convertToNavigationItems(items) {
    return items.map(function (item) {
      return {
        id: String(item.id),
        title: String(item.title || ''),
        path: String(item.path || '/'),
        children: item.children ? convertToNavigationItems(item.children) : []
      };
    });
  };
  var items = useMemo(function () {
    return [{
      label: getText('pisell-lowcode-navigation-menu-add-sub-menu'),
      key: 'add-child'
    }, {
      label: getText('pisell-lowcode-navigation-menu-add-page'),
      key: 'add-page'
    }];
  }, []);
  var handleClick = useCallback(function (key, item) {
    if (key === 'add-child') {
      onAddSubMenu === null || onAddSubMenu === void 0 ? void 0 : onAddSubMenu(item);
    } else if (key === 'add-page') {
      onAddPage === null || onAddPage === void 0 ? void 0 : onAddPage(item);
    }
  }, []);

  // 自定义渲染菜单项
  var renderMenuItem = useCallback(function (itemProps) {
    var item = itemProps.item;
    var _item$allowEdit = item.allowEdit,
      allowEdit = _item$allowEdit === void 0 ? true : _item$allowEdit,
      _item$allowDelete = item.allowDelete,
      allowDelete = _item$allowDelete === void 0 ? true : _item$allowDelete,
      _item$allowAddChild = item.allowAddChild,
      allowAddChild = _item$allowAddChild === void 0 ? true : _item$allowAddChild,
      _item$allowAddSubmenu = item.allowAddSubmenu,
      allowAddSubmenu = _item$allowAddSubmenu === void 0 ? true : _item$allowAddSubmenu,
      _item$allowAddPage = item.allowAddPage,
      allowAddPage = _item$allowAddPage === void 0 ? true : _item$allowAddPage;
    var isShowAddButton = item.isGroup && allowAddChild && (allowAddSubmenu || allowAddPage);
    return /*#__PURE__*/React.createElement("div", {
      className: "pisell-lowcode-navigation-menu-item"
    }, /*#__PURE__*/React.createElement("div", {
      className: "pisell-lowcode-navigation-menu-item-content"
    }, /*#__PURE__*/React.createElement("div", {
      className: "pisell-lowcode-navigation-menu-item-content-icon"
    }, /*#__PURE__*/React.createElement(Icon, {
      type: item.icon
    })), /*#__PURE__*/React.createElement("div", {
      className: "pisell-lowcode-navigation-menu-item-content-text"
    }, /*#__PURE__*/React.createElement("div", {
      className: "pisell-lowcode-navigation-menu-item-title"
    }, item.title), /*#__PURE__*/React.createElement("div", {
      className: "pisell-lowcode-navigation-menu-item-description"
    }, item.description, !item.isGroup && item.version && /*#__PURE__*/React.createElement(PisellTags, {
      type: "pill_color",
      color: "success"
    }, item.version)))), /*#__PURE__*/React.createElement("div", {
      className: "pisell-lowcode-navigation-menu-item-action-wrap"
    }, allowEdit && /*#__PURE__*/React.createElement(Button, {
      type: "text",
      onClick: function onClick() {
        return onEdit === null || onEdit === void 0 ? void 0 : onEdit(item);
      },
      className: "pisell-lowcode-navigation-menu-item-action-button",
      icon: /*#__PURE__*/React.createElement(Icon, {
        type: "pisell2-edit-05",
        className: "pisell-lowcode-navigation-menu-item-action-button-icon"
      })
    }), isShowAddButton && /*#__PURE__*/React.createElement(Dropdown, {
      menu: {
        items: [allowAddSubmenu && {
          key: 'add-child',
          label: getText('pisell-lowcode-navigation-menu-add-sub-menu'),
          onClick: function onClick() {
            return handleClick('add-child', item);
          }
        }, allowAddPage && {
          key: 'add-page',
          label: getText('pisell-lowcode-navigation-menu-add-page'),
          onClick: function onClick() {
            return handleClick('add-page', item);
          }
        }].filter(Boolean)
      }
    }, /*#__PURE__*/React.createElement(Button, {
      type: "text",
      className: "pisell-lowcode-navigation-menu-item-action-button",
      icon: /*#__PURE__*/React.createElement(Icon, {
        type: "pisell2-plus",
        className: "pisell-lowcode-navigation-menu-item-action-button-icon"
      })
    })), allowDelete && /*#__PURE__*/React.createElement(Button, {
      type: "text",
      onClick: function onClick() {
        return onDelete === null || onDelete === void 0 ? void 0 : onDelete(item);
      },
      className: "pisell-lowcode-navigation-menu-item-action-button",
      icon: /*#__PURE__*/React.createElement(Icon, {
        type: "pisell2-trash-01",
        className: "pisell-lowcode-navigation-menu-item-action-button-icon"
      })
    })));
  }, [value, onChange]);

  // 处理数据变化
  var handleChange = useCallback(function (items) {
    onChange === null || onChange === void 0 ? void 0 : onChange(convertToNavigationItems(items));
  }, [onChange]);
  var leftContent = useMemo(function () {
    return /*#__PURE__*/React.createElement("div", {
      className: "pisell-lowcode-navigation-menu-left-content"
    }, title);
  }, [title]);
  var rightContent = useMemo(function () {
    return /*#__PURE__*/React.createElement("div", {
      className: "pisell-lowcode-navigation-menu-right-content"
    }, /*#__PURE__*/React.createElement(Button, {
      size: "large",
      type: "primary",
      icon: /*#__PURE__*/React.createElement(Icon, {
        type: "pisell2-plus"
      }),
      onClick: function onClick() {
        return onAddSubMenu === null || onAddSubMenu === void 0 ? void 0 : onAddSubMenu();
      }
    }, getText('pisell-lowcode-navigation-menu-add-sub-menu')), /*#__PURE__*/React.createElement(Button, {
      size: "large",
      icon: /*#__PURE__*/React.createElement(Icon, {
        type: "pisell2-plus"
      }),
      onClick: function onClick() {
        return onAddPage === null || onAddPage === void 0 ? void 0 : onAddPage();
      }
    }, getText('pisell-lowcode-navigation-menu-add-page')));
  }, [title]);
  var formatValue = useMemo(function () {
    return formatTree(value, function (item) {
      return _objectSpread(_objectSpread({}, item), {}, {
        disabledDrop: !item.isGroup
      });
    });
  }, [value]);
  var getItemStyle = useCallback(function (itemProps) {
    var item = itemProps.item;
    return {
      backgroundColor: item.isGroup ? '#fff' : 'var(--Gray-50, #F9FAFB)'
    };
  }, []);
  return /*#__PURE__*/React.createElement(PisellDropSort, {
    value: formatValue,
    allowDrag: allowDrag,
    allowDelete: allowDelete,
    allowAddChild: allowAddChild,
    allowAddRoot: allowAddRoot,
    disabled: disabled,
    spacing: spacing,
    maxLevel: maxLevel,
    style: style,
    className: className,
    onChange: handleChange,
    renderItem: renderMenuItem,
    isCustomAction: true,
    __designMode: __designMode,
    leftContent: leftContent,
    rightContent: rightContent,
    getItemStyle: getItemStyle,
    emptyContent: /*#__PURE__*/React.createElement(PisellEmpty, {
      maxWidth: 400,
      description: getText('pisell-lowcode-navigation-menu-add-page-tip')
    })
  });
};
export default PisellNavigationMenu;