function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
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(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import React, { useCallback, useMemo } from 'react';
import { isFunction } from "@pisell/utils";
import classNames from 'classnames';
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$allowIsShow = _ref.allowIsShow,
    allowIsShow = _ref$allowIsShow === void 0 ? true : _ref$allowIsShow,
    _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,
    onIsShow = _ref.onIsShow,
    __designMode = _ref.__designMode,
    title = _ref.title,
    propsRightContent = _ref.rightContent,
    propsGetItemStyle = _ref.getItemStyle,
    canDrop = _ref.canDrop,
    _ref$indentationWidth = _ref.indentationWidth,
    indentationWidth = _ref$indentationWidth === void 0 ? 24 : _ref$indentationWidth,
    hideDescription = _ref.hideDescription,
    showActionOnHover = _ref.showActionOnHover,
    showTitleTags = _ref.showTitleTags;
  // 将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 || '/'),
        collapsed: item.collapsed,
        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 || onAddSubMenu(item);
    } else if (key === 'add-page') {
      onAddPage === null || onAddPage === void 0 || onAddPage(item);
    }
  }, []);
  var tagTextMap = useMemo(function () {
    return {
      base: {
        text: getText('pisell-lowcode-navigation-menu-tag-base'),
        color: '#7f56d9'
      },
      proCode: {
        text: getText('pisell-lowcode-navigation-menu-tag-proCode'),
        color: '#1677ff'
      },
      pisellV1: {
        text: getText('pisell-lowcode-navigation-menu-tag-pisell1'),
        color: '#ee837a'
      },
      group: {
        text: getText('pisell-lowcode-navigation-menu-tag-group'),
        color: '#7f56d9'
      },
      subMenu: {
        text: getText('pisell-lowcode-navigation-menu-tag-sub-menu'),
        color: '#067647'
      },
      custom: {
        text: getText('pisell-lowcode-navigation-menu-tag-custom'),
        color: '#B54708'
      }
    };
  }, []);

  // 自定义渲染菜单项
  var renderMenuItem = useCallback(function (itemProps) {
    var _tagTextMap$group, _tagTextMap$group2, _tagTextMap$subMenu, _tagTextMap$subMenu2, _tagTextMap$custom, _tagTextMap$custom2, _tagTextMap$item$sour, _tagTextMap$item$sour2;
    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,
      _item$allowIsShow = item.allowIsShow,
      allowIsShow = _item$allowIsShow === void 0 ? true : _item$allowIsShow;
    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"
    }, item.icon && /*#__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, showTitleTags && /*#__PURE__*/React.createElement(React.Fragment, null, item.isGroup && item.is_top && /*#__PURE__*/React.createElement(PisellTags, {
      type: "pill_color",
      color: (_tagTextMap$group = tagTextMap['group']) === null || _tagTextMap$group === void 0 ? void 0 : _tagTextMap$group.color
    }, ((_tagTextMap$group2 = tagTextMap['group']) === null || _tagTextMap$group2 === void 0 ? void 0 : _tagTextMap$group2.text) || ""), item.isGroup && !item.is_top && /*#__PURE__*/React.createElement(PisellTags, {
      type: "pill_color",
      color: (_tagTextMap$subMenu = tagTextMap['subMenu']) === null || _tagTextMap$subMenu === void 0 ? void 0 : _tagTextMap$subMenu.color
    }, ((_tagTextMap$subMenu2 = tagTextMap['subMenu']) === null || _tagTextMap$subMenu2 === void 0 ? void 0 : _tagTextMap$subMenu2.text) || ""), item.isCustom && /*#__PURE__*/React.createElement(PisellTags, {
      type: "pill_color",
      color: (_tagTextMap$custom = tagTextMap['custom']) === null || _tagTextMap$custom === void 0 ? void 0 : _tagTextMap$custom.color
    }, ((_tagTextMap$custom2 = tagTextMap['custom']) === null || _tagTextMap$custom2 === void 0 ? void 0 : _tagTextMap$custom2.text) || ""))), hideDescription ? null : /*#__PURE__*/React.createElement("div", {
      className: "pisell-lowcode-navigation-menu-item-description",
      style: {
        display: hideDescription ? "none" : "flex"
      }
    }, item.description, item.source && /*#__PURE__*/React.createElement(PisellTags, {
      type: "pill_color",
      color: (_tagTextMap$item$sour = tagTextMap[item.source]) === null || _tagTextMap$item$sour === void 0 ? void 0 : _tagTextMap$item$sour.color
    }, ((_tagTextMap$item$sour2 = tagTextMap[item.source]) === null || _tagTextMap$item$sour2 === void 0 ? void 0 : _tagTextMap$item$sour2.text) || ""), !item.isGroup && item.version && /*#__PURE__*/React.createElement(PisellTags, {
      type: "pill_color",
      color: "success"
    }, "v", item.version)))), /*#__PURE__*/React.createElement("div", {
      className: classNames("pisell-lowcode-navigation-menu-item-action-wrap", {
        "pisell-lowcode-navigation-menu-item-action-wrap-hover": showActionOnHover
      })
    }, allowIsShow && /*#__PURE__*/React.createElement(Button, {
      type: "text",
      onClick: function onClick() {
        return onIsShow === null || onIsShow === void 0 ? void 0 : onIsShow(item);
      },
      className: "pisell-lowcode-navigation-menu-item-action-button",
      icon: /*#__PURE__*/React.createElement(Icon, {
        type: item.is_show === false ? "pisell2-eye-off" : "pisell2-eye",
        className: "pisell-lowcode-navigation-menu-item-action-button-icon"
      })
    }), 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, {
      getPopupContainer: function getPopupContainer(triggerNode) {
        return triggerNode;
      },
      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 || 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 () {
    if (propsRightContent) {
      return propsRightContent;
    }
    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')));
  }, [propsRightContent]);
  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;
    if (isFunction(propsGetItemStyle)) {
      return (propsGetItemStyle === null || propsGetItemStyle === void 0 ? void 0 : propsGetItemStyle(item)) || {};
    }
    return {
      backgroundColor: item.isGroup ? '#fff' : 'var(--Gray-50, #F9FAFB)'
    };
  }, [propsGetItemStyle]);
  return /*#__PURE__*/React.createElement(PisellDropSort, {
    indentationWidth: indentationWidth,
    value: formatValue,
    allowDrag: allowDrag,
    allowDelete: allowDelete,
    allowAddChild: allowAddChild,
    allowAddRoot: allowAddRoot,
    allowIsShow: allowIsShow,
    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')
    }),
    canDrop: canDrop
  });
};
export default PisellNavigationMenu;