import React__default, { useMemo, useCallback } from 'react';
import { Alert } from '../components/Alert.mjs';
import { FlexBox } from '../shared/components/FlexBox.mjs';
import { Input } from '../components/Input.mjs';
import { SettingsContainer, useSettingsContainer } from '../components/SettingsContainer.mjs';
import { SettingsList } from '../components/SettingsList.mjs';
import { SettingsListItem } from '../components/SettingsListItem.mjs';
import { Typography } from '../components/Typography.mjs';
import { NO_VALUE } from '../utils/noValue.mjs';
import { useFormState } from '../utils/useFormState.mjs';
import { useMutateMember } from '../utils/useMutateMember.mjs';
import { useRbac } from '../utils/useRbac.mjs';
import { useSelf } from '../utils/useSelf.mjs';
import { useStateSliceSetter } from '../utils/useStateSliceSetter.mjs';
import { useMemberManagementRouterController } from './MemberManagementRouter.mjs';

const MemberDetailsSectionBody = ({ localState, setLocalState, remoteState, isSelf })=>{
    const { editing } = useSettingsContainer();
    const { emailAddress, name } = editing ? localState : remoteState;
    const handleNameChange = useStateSliceSetter(setLocalState, 'name');
    const handleEmailChange = useStateSliceSetter(setLocalState, 'emailAddress');
    const { data: canUpdateMemberNamePerm } = useRbac('stytch.member', 'update.info.name');
    const { data: canUpdateMemberEmailPerm } = useRbac('stytch.member', 'update.info.email');
    const { data: canUpdateSelfNamePerm } = useRbac('stytch.self', 'update.info.name');
    const canUpdateName = canUpdateMemberNamePerm || canUpdateSelfNamePerm && isSelf;
    const canUpdateEmail = canUpdateMemberEmailPerm && !isSelf;
    const showCannotEditOwnEmailAlert = editing && canUpdateMemberEmailPerm && isSelf;
    return /*#__PURE__*/ React__default.createElement(FlexBox, {
        flexDirection: "column",
        gap: 2
    }, showCannotEditOwnEmailAlert && /*#__PURE__*/ React__default.createElement(Alert, null, "You cannot edit your own email address."), /*#__PURE__*/ React__default.createElement(SettingsList, null, /*#__PURE__*/ React__default.createElement(SettingsListItem, {
        title: "Name"
    }, editing && canUpdateName ? /*#__PURE__*/ React__default.createElement(Input, {
        value: name,
        onChange: handleNameChange
    }) : /*#__PURE__*/ React__default.createElement(Typography, {
        variant: "body2"
    }, name || NO_VALUE)), /*#__PURE__*/ React__default.createElement(SettingsListItem, {
        title: "Email"
    }, editing && canUpdateEmail ? /*#__PURE__*/ React__default.createElement(Input, {
        value: emailAddress,
        onChange: handleEmailChange,
        caption: "Updating will revoke any current sessions, force a password reset, and delete SSO/OAuth registrations."
    }) : /*#__PURE__*/ React__default.createElement(Typography, {
        variant: "body2"
    }, emailAddress || NO_VALUE))));
};
const MemberDetailsSection = ({ member })=>{
    const { isSelf } = useSelf();
    const isMemberSelf = isSelf(member.member_id);
    const { data: canUpdateMemberNamePerm } = useRbac('stytch.member', 'update.info.name');
    const { data: canUpdateMemberEmailPerm } = useRbac('stytch.member', 'update.info.email');
    const { data: canUpdateSelfNamePerm } = useRbac('stytch.self', 'update.info.name');
    const canUpdateName = canUpdateMemberNamePerm || canUpdateSelfNamePerm && isMemberSelf;
    const canUpdateEmail = canUpdateMemberEmailPerm && !isMemberSelf;
    const isMemberDeleted = member.status === 'deleted';
    const canEditSection = !isMemberDeleted && (canUpdateEmail || canUpdateName);
    const remoteState = useMemo(()=>({
            emailAddress: member.email_address,
            name: member.name
        }), [
        member.email_address,
        member.name
    ]);
    const { localState, setLocalState, editing, handleSetEditing } = useFormState({
        remoteState
    });
    const { mutate } = useMutateMember();
    const handleSave = useCallback(async ()=>{
        const memberOptions = {
            member_id: member.member_id
        };
        let shouldUpdate = false;
        const setOption = (key, value)=>{
            memberOptions[key] = value;
            shouldUpdate = true;
        };
        if (localState.name !== remoteState.name) {
            setOption('name', localState.name);
        }
        if (localState.emailAddress !== remoteState.emailAddress) {
            setOption('email_address', localState.emailAddress);
        }
        if (shouldUpdate) {
            await mutate(memberOptions);
        }
    }, [
        localState.emailAddress,
        localState.name,
        member.member_id,
        mutate,
        remoteState.emailAddress,
        remoteState.name
    ]);
    const { useBlockNavigation } = useMemberManagementRouterController();
    return /*#__PURE__*/ React__default.createElement(SettingsContainer, {
        title: "Details",
        hasCTA: canEditSection,
        onSave: handleSave,
        useBlockNavigation: useBlockNavigation,
        editing: editing,
        setEditing: handleSetEditing
    }, /*#__PURE__*/ React__default.createElement(MemberDetailsSectionBody, {
        remoteState: remoteState,
        localState: localState,
        setLocalState: setLocalState,
        isSelf: isMemberSelf
    }));
};

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