import React__default, { useMemo } from 'react';
import { ROLE_ID_STYTCH_MEMBER } from '../utils/roles.mjs';
import { useRoleSortFn } from '../utils/useRoleSortFn.mjs';
import { TagList } from './TagList.mjs';

const RolesList = ({ hideStytchMemberWithOtherRoles, roles })=>{
    const sortRows = useRoleSortFn();
    const roleObjects = useMemo(()=>roles.map((role)=>typeof role === 'string' ? {
                role_id: role
            } : role), [
        roles
    ]);
    const sortedRoles = useMemo(()=>sortRows(// When specified, only show `stytch_member` if it is the only role
        !hideStytchMemberWithOtherRoles || roleObjects.length === 1 ? roleObjects : roleObjects.filter((role)=>role.role_id !== ROLE_ID_STYTCH_MEMBER)).map((role)=>role.displayName), [
        hideStytchMemberWithOtherRoles,
        roleObjects,
        sortRows
    ]);
    return /*#__PURE__*/ React__default.createElement(TagList, {
        tags: sortedRoles
    });
};

export { RolesList };
//# sourceMappingURL=RolesList.mjs.map
