import React__default, { useState, useCallback } from 'react';
import { passwordManagerDisableAutofillProps } from '../../utils/passwordManagerDisableAutofillProps.mjs';
import { Autocomplete } from '../components/Autocomplete.mjs';
import { Input } from '../components/Input.mjs';
import { Modal } from '../components/Modal.mjs';
import { ROLE_ID_STYTCH_MEMBER } from '../utils/roles.mjs';
import { useRbac } from '../utils/useRbac.mjs';
import { useRoleAutocomplete } from '../utils/useRoleAutocomplete.mjs';
import { useModalState } from '../shared/components/Modal.mjs';

const defaultInviteRoles = [];
const useInviteModal = (inviteUser)=>{
    const [inviteName, setInviteName] = useState('');
    const [inviteEmail, setInviteEmail] = useState('');
    const [inviteRoles, setInviteRoles] = useState(defaultInviteRoles);
    const { open: openInviteModal, ...modalState } = useModalState(async ()=>{
        await inviteUser(inviteEmail, {
            name: inviteName,
            roles: inviteRoles
        });
        modalState.close();
    });
    const handleInviteClick = useCallback(()=>{
        setInviteName('');
        setInviteEmail('');
        setInviteRoles(defaultInviteRoles);
        openInviteModal();
    }, [
        openInviteModal
    ]);
    return {
        handleInviteClick,
        inviteModalProps: {
            modalState,
            inviteName,
            setInviteName,
            inviteEmail,
            setInviteEmail,
            inviteRoles,
            setInviteRoles
        }
    };
};
const InviteModal = ({ modalState, inviteEmail, inviteName, inviteRoles, setInviteEmail, setInviteName, setInviteRoles })=>{
    const { data: canGetOrgCustomRoles } = useRbac('stytch.custom-org-roles', 'get');
    const roleAutocompleteProps = useRoleAutocomplete({
        excludeStytchMember: true,
        includeOrgRoles: canGetOrgCustomRoles ?? false
    });
    const stytchMemberRoleDisplayName = roleAutocompleteProps.getOptionLabel(ROLE_ID_STYTCH_MEMBER);
    const formIsValid = inviteEmail.trim().length > 0;
    return /*#__PURE__*/ React__default.createElement(Modal, {
        ...modalState,
        keepOpenOnConfirm: true,
        title: "Invite Member",
        confirmButtonText: "Invite",
        disableConfirm: !formIsValid
    }, /*#__PURE__*/ React__default.createElement(Input, {
        label: "Name (optional)",
        placeholder: "Enter name",
        value: inviteName,
        onChange: setInviteName
    }), /*#__PURE__*/ React__default.createElement(Input, {
        label: "Email address",
        placeholder: "Enter email address",
        value: inviteEmail,
        onChange: setInviteEmail,
        inputProps: passwordManagerDisableAutofillProps
    }), /*#__PURE__*/ React__default.createElement(Autocomplete, {
        ...roleAutocompleteProps,
        placeholder: inviteRoles.length > 0 ? undefined : 'Select Role',
        label: "Role",
        caption: `All members are automatically assigned the ${stytchMemberRoleDisplayName} Role. Select additional Roles to assign more permissions.`,
        value: inviteRoles,
        onChange: setInviteRoles
    }));
};

export { InviteModal, useInviteModal };
//# sourceMappingURL=InviteModal.mjs.map
