import React from 'react';
import type { SupplierRole } from '../types';
import { SUPPLIER_ROLE_OPTIONS } from '../utils/constants';
import { canCreateSupplier } from '../utils/permissions';

interface RoleSwitcherProps {
  role: SupplierRole;
  onChange: (role: SupplierRole) => void;
}

export function RoleSwitcher({ role, onChange }: RoleSwitcherProps) {
  const current = SUPPLIER_ROLE_OPTIONS.find((item) => item.value === role);

  return (
    <div className="sm-role-bar" data-annotation-id="sm-role-switch">
      <span className="sm-role-bar-label">当前操作角色（原型演示）：</span>
      <select
        className="vm-input sm-role-select"
        value={role}
        onChange={(event) => onChange(event.target.value as SupplierRole)}
        aria-label="当前操作角色"
      >
        {SUPPLIER_ROLE_OPTIONS.map((item) => (
          <option key={item.value} value={item.value}>{item.label}</option>
        ))}
      </select>
      <span className="sm-role-hint">{current?.desc}</span>
      {!canCreateSupplier(role) && (
        <span className="sm-role-hint sm-role-hint-warn">当前角色仅可查看主数据</span>
      )}
    </div>
  );
}
