// 导入按钮组（推荐）
import ButtonGroup from '@/components/space/ButtonGroup';

// 单独导入组件
import { SpaceButton } from '@/components/space/ButtonGroup';

// 导入类型定义
import type {
  ButtonConfig,
  UserRole,
  ButtonGroupProps,
  PermissionConfig,
} from '@/components/space/ButtonGroup';

// 导入权限枚举
import {
  SpaceType,
  RoleType,
  ModuleType,
  OperationType,
} from '@/components/space/ButtonGroup';

import React from 'react';
import ButtonGroup from '@/components/space/ButtonGroup';
import { EditOutlined, DeleteOutlined, ShareAltOutlined } from '@ant-design/icons';

const MyComponent = () => {
  const buttons = [
    {
      key: 'edit',
      text: '编辑',
      icon: <EditOutlined />,
      type: 'primary' as const
    },
    {
      key: 'share',
      text: '分享',
      icon: <ShareAltOutlined />,
      type: 'default' as const
    },
    {
      key: 'delete',
      text: '删除',
      icon: <DeleteOutlined />,
      type: 'default' as const,
      danger: true
    }
  ];

  const handleButtonClick = (buttonKey: string, event: React.MouseEvent) => {
    console.log('按钮点击:', buttonKey);
  };

  return (
    <ButtonGroup
      buttons={buttons}
      onButtonClick={handleButtonClick}
    />
  );
};

import React from 'react';
import ButtonGroup from '@/components/space/ButtonGroup';
import { ModuleType, OperationType, SpaceType, RoleType } from '@/components/space/ButtonGroup';
import type { ButtonConfig, UserRole } from '@/components/space/ButtonGroup';

const PermissionButtonGroup = () => {
  // 用户角色信息（也可以不传，组件会自动从 userStore 获取）
  const userRole: UserRole = {
    spaceType: SpaceType.ENTERPRISE,
    roleType: RoleType.ADMIN
  };

  const buttons: ButtonConfig[] = [
    {
      key: 'edit',
      text: '编辑',
      icon: <EditOutlined />,
      type: 'primary',
      permission: {
        module: ModuleType.AGENT_MANAGEMENT,
        operation: OperationType.UPDATE
      }
    },
    {
      key: 'delete',
      text: '删除',
      icon: <DeleteOutlined />,
      danger: true,
      permission: {
        module: ModuleType.AGENT_MANAGEMENT,
        operation: OperationType.DELETE,
        resourceOwnerId: 'owner123',
        currentUserId: 'user456'
      }
    },
    {
      key: 'advanced',
      text: '高级功能',
      permission: {
        customCheck: (userRole) => userRole.roleType === RoleType.SUPER_ADMIN
      }
    }
  ];

  return (
    <ButtonGroup
      buttons={buttons}
      userRole={userRole}
      onButtonClick={(key) => console.log('点击了:', key)}
    />
  );
};

import React from 'react';
import { SpaceButton } from '@/components/space/ButtonGroup';
import { PlusOutlined } from '@ant-design/icons';

const SingleButton = () => {
  const buttonConfig = {
    key: 'create',
    text: '创建',
    icon: <PlusOutlined />,
    type: 'primary' as const,
    tooltip: '创建新的资源'
  };

  return (
    <SpaceButton
      config={buttonConfig}
      onClick={(key) => console.log('创建操作')}
    />
  );
};

{
  key: 'share',
  text: '分享',
  permission: {
    module: ModuleType.SPACE,
    operation: OperationType.VIEW,
    failureBehavior: PermissionFailureBehavior.DISABLE // 单独配置此按钮的行为
  }
}

<ButtonGroup
  buttons={buttons}
  defaultPermissionFailureBehavior={PermissionFailureBehavior.DISABLE} // 全局默认行为
/>

// 方式1: 显式传入
<ButtonGroup userRole={userRole} buttons={buttons} />

// 方式2: 自动获取（推荐）
<ButtonGroup buttons={buttons} />

import { PermissionFailureBehavior } from '@/components/ButtonGroup';

const buttons = [
  {
    key: 'edit',
    text: '编辑',
    // 基础模块权限 - 无权限时隐藏（默认行为）
    permission: {
      module: ModuleType.AGENT_MANAGEMENT,
      operation: OperationType.EDIT,
    },
  },
  {
    key: 'share',
    text: '分享',
    // 无权限时禁用而不是隐藏
    permission: {
      module: ModuleType.AGENT_MANAGEMENT,
      operation: OperationType.VIEW,
      failureBehavior: PermissionFailureBehavior.DISABLE,
    },
  },
  {
    key: 'delete',
    text: '删除',
    // 资源权限 + 所有者检查 - 无权限时隐藏
    permission: {
      module: ModuleType.AGENT_MANAGEMENT,
      operation: OperationType.DELETE,
      resourceOwnerId: agent.ownerId,
      currentUserId: currentUser.id,
      failureBehavior: PermissionFailureBehavior.HIDE,
    },
  },
  {
    key: 'superAdmin',
    text: '超级管理',
    // 自定义权限检查 - 无权限时禁用
    permission: {
      customCheck: userRole => userRole.roleType === RoleType.SUPER_ADMIN,
      failureBehavior: PermissionFailureBehavior.DISABLE,
    },
  },
];

// 通过 className
<ButtonGroup
  className="my-button-group"
  buttons={buttons}
/>

// 通过 style 属性
<ButtonGroup
  style={{ marginTop: 16 }}
  buttons={buttons}
/>

// 在你的样式文件中
.my-button-group {
  .ant-btn {
    border-radius: 8px;
    margin: 0 4px;
  }
}

// ✅ 推荐：清晰的权限配置
const buttons = [
  {
    key: 'edit',
    text: '编辑',
    permission: {
      module: ModuleType.AGENT_MANAGEMENT,
      operation: OperationType.UPDATE,
    },
  },
];

// ❌ 不推荐：混合权限逻辑
const buttons = [
  {
    key: 'edit',
    text: '编辑',
    visible: userRole => {
      // 复杂的权限逻辑应该放在 permission.customCheck 中
      return userRole.roleType === RoleType.ADMIN && hasOtherPermission();
    },
  },
];

// ✅ 推荐：将按钮配置提取到组件外部
const BUTTON_CONFIGS = [
  { key: 'edit', text: '编辑', icon: <EditOutlined /> },
  { key: 'delete', text: '删除', icon: <DeleteOutlined /> }
];

const MyComponent = () => {
  return <ButtonGroup buttons={BUTTON_CONFIGS} />;
};

// ❌ 不推荐：每次渲染都创建新的配置
const MyComponent = () => {
  const buttons = [
    { key: 'edit', text: '编辑', icon: <EditOutlined /> }
  ];
  return <ButtonGroup buttons={buttons} />;
};

const MyComponent = () => {
  const handleButtonClick = (key: string, event: React.MouseEvent) => {
    try {
      switch (key) {
        case 'delete':
          handleDelete();
          break;
        case 'edit':
          handleEdit();
          break;
        default:
          console.warn(`未知的按钮操作: ${key}`);
      }
    } catch (error) {
      console.error('按钮操作失败:', error);
      // 显示错误提示
    }
  };

  return (
    <ButtonGroup
      buttons={buttons}
      onButtonClick={handleButtonClick}
    />
  );
};