import ChevronLeft from '../../../../../node_modules/@mui/icons-material/esm/ChevronLeft.mjs';
import React__default from 'react';
import useSWR from '../../../../../node_modules/swr/core/dist/index.mjs';
import { extractErrorMessage } from '../../utils/extractErrorMessage.mjs';
import { Alert } from '../components/Alert.mjs';
import { Button } from '../components/Button.mjs';
import { FlexBox } from '../shared/components/FlexBox.mjs';
import { PageLoadingIndicator } from '../components/PageLoadingIndicator.mjs';
import { Tag } from '../components/Tag.mjs';
import { Typography } from '../components/Typography.mjs';
import { decorateCurrentMemberName } from '../utils/decorateCurrentMemberName.mjs';
import { memberGetKey } from '../utils/memberGetKey.mjs';
import { NO_VALUE } from '../utils/noValue.mjs';
import { useOrgInfo } from '../utils/useOrgInfo.mjs';
import { useSelf } from '../utils/useSelf.mjs';
import { useStytchClient } from '../utils/useStytchClient.mjs';
import { AccessSection } from './AccessSection.mjs';
import { AuthManagementSection } from './AuthManagementSection.mjs';
import { DangerZoneSection } from './DangerZoneSection.mjs';
import { getMemberStatusDisplayName } from './getMemberStatusDisplayName.mjs';
import { MemberDetailsSection } from './MemberDetailsSection.mjs';
import { useMemberManagementRouterController } from './MemberManagementRouter.mjs';
import { allMemberStatuses } from './MemberStatus.mjs';

const useMember = (memberId)=>{
    const client = useStytchClient();
    return useSWR(memberGetKey(memberId), async ()=>{
        const response = await client.organization.members.search({
            limit: 1,
            query: {
                operator: 'AND',
                operands: [
                    {
                        filter_name: 'member_ids',
                        filter_value: [
                            memberId
                        ]
                    },
                    // Deleted members do not appear in search results by default, so we
                    // need to specify all statuses explicitly
                    {
                        filter_name: 'statuses',
                        filter_value: allMemberStatuses
                    }
                ]
            }
        });
        return response.members.at(0) ?? null;
    });
};
const MemberDetailsScreen = ({ memberId })=>{
    const { navigate } = useMemberManagementRouterController();
    const { data: member, error, isLoading } = useMember(memberId);
    const memberName = member?.name || NO_VALUE;
    const { self } = useSelf();
    const isSelf = self?.member_id === memberId;
    const memberDisplayName = isSelf ? decorateCurrentMemberName(memberName) : memberName;
    const { data: organization } = useOrgInfo();
    const orgRequiresMfa = organization?.mfa_policy === 'REQUIRED_FOR_ALL';
    return /*#__PURE__*/ React__default.createElement(FlexBox, {
        flexDirection: "column",
        gap: 3
    }, /*#__PURE__*/ React__default.createElement(Button, {
        compact: true,
        variant: "ghost",
        onClick: ()=>{
            navigate({
                screen: 'membersList'
            });
        },
        startIcon: /*#__PURE__*/ React__default.createElement(ChevronLeft, null)
    }, "Back to all Members"), member ? /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, /*#__PURE__*/ React__default.createElement(FlexBox, {
        alignItems: "center",
        justifyContent: "flex-start",
        gap: 1
    }, /*#__PURE__*/ React__default.createElement(Typography, {
        variant: "h2"
    }, memberDisplayName), member.status !== 'active' && /*#__PURE__*/ React__default.createElement(Tag, {
        size: "small"
    }, getMemberStatusDisplayName(member.status))), /*#__PURE__*/ React__default.createElement(FlexBox, {
        flexDirection: "column",
        gap: 3
    }, /*#__PURE__*/ React__default.createElement(MemberDetailsSection, {
        member: member
    }), /*#__PURE__*/ React__default.createElement(AccessSection, {
        member: member,
        orgRequiresMfa: orgRequiresMfa
    }), member.status === 'active' && /*#__PURE__*/ React__default.createElement(AuthManagementSection, {
        member: member
    }), /*#__PURE__*/ React__default.createElement(DangerZoneSection, {
        member: member
    }))) : error || member === null ? /*#__PURE__*/ React__default.createElement(Alert, null, extractErrorMessage(error) ?? 'There was an error loading Member details.') : isLoading && /*#__PURE__*/ React__default.createElement(PageLoadingIndicator, null));
};

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