interface MenuButtonItem {
  props: {
    children?: string | MenuChild[];
    label?: string; // 分组标签
    [key: string]: unknown;
  };
  group?: string; // 分组名称
}

type MenuChild = string | { props: MenuButtonItem['props'] } | MenuChild[];

/**
 * 将菜单按钮的子元素扁平化处理
 * @param children - 子元素
 * @param groupLabel - 分组标签
 * @returns 扁平化后的菜单项数组
 */
function flattenChildren(
  children: MenuChild[],
  groupLabel = '',
): MenuButtonItem[] {
  const result: MenuButtonItem[] = [];

  const processChild = (child: MenuChild, currentGroup: string) => {
    if (!child) return;

    if (typeof child === 'string') {
      result.push({ props: { children: child }, group: currentGroup });
      return;
    }

    if (Array.isArray(child)) {
      child.forEach((c) => processChild(c, currentGroup));
      return;
    }

    if (child.props) {
      const newGroup = child.props.label ?? currentGroup;

      if (typeof child.props.children === 'string') {
        result.push({ props: child.props, group: newGroup });
        return;
      }

      if (Array.isArray(child.props.children)) {
        child.props.children.forEach((c) => processChild(c, newGroup));
      }
    }
  };

  processChild(children, groupLabel);

  return result;
}

/**
 * 格式化菜单按钮数据
 * @param children - 子元素
 * @returns 格式化后的菜单项数组
 */
export function formatMenuButtonToButton(
  children: MenuChild[],
): MenuButtonItem[] {
  const flattenedChildren = flattenChildren(children);

  return flattenedChildren.map((item) => ({
    props: {
      ...item.props,
      ...(item.group && { label: item.group }),
    },
  }));
}