// REQ-USR-001 / REQ-USR-002: 用户单据工具栏（保存/取消/新增 + 占位按钮 + 齿轮，BR12/BR13/BR14/BR15/D8/D10）
import { Button, App as AntdApp } from 'antd';
import {
  SaveOutlined,
  CloseCircleOutlined,
  PlusCircleOutlined,
  SettingOutlined,
} from '@ant-design/icons';
import {
  TEXT_SAVE,
  TEXT_CANCEL,
  TEXT_NEW,
  TEXT_DELETE,
  TEXT_VOID,
  TEXT_RESET_PWD,
  TEXT_UNVOID,
  TEXT_FUNC,
  MSG_FUNC_PLACEHOLDER,
} from './constants';
import styles from './UserDetail.module.css';

export interface UserDetailToolbarProps {
  mode: 'create' | 'edit';
  submitting: boolean;
  canSave: boolean;
  onSave(): void;
  onCancel(): void;
  onNew(): void;
}

const PLACEHOLDER_BUTTONS = [TEXT_DELETE, TEXT_VOID, TEXT_RESET_PWD, TEXT_UNVOID, TEXT_FUNC];

export default function UserDetailToolbar({
  submitting,
  canSave,
  onSave,
  onCancel,
  onNew,
}: UserDetailToolbarProps) {
  const { message } = AntdApp.useApp();
  const placeholder = () => message.info(MSG_FUNC_PLACEHOLDER);

  return (
    <div className={styles.toolbar}>
      <Button
        type="primary"
        icon={<SaveOutlined />}
        loading={submitting}
        disabled={submitting || !canSave}
        onClick={() => onSave()}
        data-testid="btn-save"
      >
        {TEXT_SAVE}
      </Button>
      <Button
        type="text"
        icon={<CloseCircleOutlined />}
        onClick={() => onCancel()}
        data-testid="btn-cancel"
      >
        {TEXT_CANCEL}
      </Button>
      <Button
        type="text"
        icon={<PlusCircleOutlined />}
        onClick={() => onNew()}
        data-testid="btn-new"
      >
        {TEXT_NEW}
      </Button>

      {PLACEHOLDER_BUTTONS.map((label) => (
        <Button key={label} type="text" onClick={placeholder} data-testid={'btn-ph-' + label}>
          {label}
        </Button>
      ))}

      <span className={styles.toolbarSpacer} />

      <span
        className={styles.gear}
        data-testid="btn-gear"
        role="presentation"
        aria-label="设置"
        onClick={placeholder}
      >
        <SettingOutlined />
      </span>
    </div>
  );
}