import type { RoleSummary } from '@lingxi/shared';
import type { ReactNode } from 'react';

import { isSuperAdminRole } from './role-utils';

export interface RoleChipsSelectProps {
  roles: readonly RoleSummary[];
  value: readonly string[];
  disabled?: boolean;
  onChange: (roleIds: string[]) => void;
}

export function RoleChipsSelect({
  roles,
  value,
  disabled = false,
  onChange,
}: RoleChipsSelectProps): ReactNode {
  const selected = new Set(value);
  return (
    <div className="lx-role-picker" role="group" aria-label="角色">
      {roles.map((role) => {
        const active = selected.has(role.id);
        return (
          <button
            key={role.id}
            type="button"
            className={active ? 'lx-role-picker__item is-active' : 'lx-role-picker__item'}
            aria-pressed={active}
            disabled={disabled}
            onClick={() => {
              const next = new Set(selected);
              if (next.has(role.id)) {
                next.delete(role.id);
              } else {
                next.add(role.id);
              }
              onChange([...next]);
            }}
          >
            {role.name}
            {isSuperAdminRole(role) ? (
              <span className="lx-role-picker__badge">内部预置，不可停用</span>
            ) : null}
          </button>
        );
      })}
    </div>
  );
}