import { useLingui } from '../../../../../../../node_modules/@lingui/react/dist/index.mjs';
import React__default, { useState } from 'react';
import Button from '../../../components/atoms/Button.mjs';
import Column from '../../../components/atoms/Column.mjs';
import { errorToast } from '../../../components/atoms/Toast.mjs';
import Typography from '../../../components/atoms/Typography.mjs';
import ButtonColumn from '../../../components/molecules/ButtonColumn.mjs';
import ErrorText from '../../../components/molecules/ErrorText.mjs';
import { useStytchUser } from '../../../hooks/useStytchUser.mjs';
import { useStytch, useEventCallback, useGlobalReducer, AppScreens } from '../../GlobalContextProvider.mjs';
import { EditableRow } from './EditableRow.mjs';
import modules_04e642ad from './PasskeyRegistrationSuccess.module.css.mjs';
import { StytchEventType } from '../../../../../../core/src/public/ui.mjs';
import { errorToStytchError } from '../../../../../../core/src/public/SDKErrors.mjs';
import { logger } from '../../../../../../core/src/utils/logger.mjs';

const PasskeyRegistrationSuccess = ()=>{
    const { i18n: $__i18n, _: $__ } = useLingui();
    const stytchClient = useStytch();
    const user = useStytchUser();
    const [optimisticRegistrations, setOptimisticRegistrations] = useState();
    const webAuthnRegistrations = optimisticRegistrations?.registrations ?? user?.webauthn_registrations;
    const [editableRowState, setEditableRowState] = useState({
        type: 'viewing'
    });
    const onEvent = useEventCallback();
    const [, dispatch] = useGlobalReducer();
    const onSetUpANewPasskey = async ()=>{
        await optimisticRegistrations?.update;
        dispatch({
            type: 'transition',
            screen: AppScreens.PasskeyRegistrationStart
        });
    };
    const onDone = async ()=>{
        await optimisticRegistrations?.update;
        onEvent({
            type: StytchEventType.PasskeyDone,
            data: {}
        });
    };
    const startOptimisticUpdate = (registrations, update)=>{
        const prevEditableRowState = {
            ...editableRowState
        };
        setOptimisticRegistrations({
            registrations,
            update
        });
        setEditableRowState({
            type: 'viewing'
        });
        update.catch((error)=>{
            logger.error(error);
            errorToast({
                message: errorToStytchError(error).message
            });
            setEditableRowState(prevEditableRowState);
        }).then(()=>{
            setOptimisticRegistrations(undefined);
        });
    };
    const deleteReg = (id)=>{
        if (!user) return;
        startOptimisticUpdate(user.webauthn_registrations.filter((r)=>r.webauthn_registration_id !== id), stytchClient.user.deleteWebauthnRegistration(id));
    };
    const updateReg = (id, name)=>{
        if (!user) return;
        startOptimisticUpdate(user.webauthn_registrations.map((r)=>r.webauthn_registration_id === id ? {
                ...r,
                name
            } : r), stytchClient.webauthn.update({
            webauthn_registration_id: id,
            name
        }).then(()=>stytchClient.user.get()));
    };
    return /*#__PURE__*/ React__default.createElement(Column, {
        gap: 6
    }, /*#__PURE__*/ React__default.createElement(Typography, {
        variant: "header"
    }, $__i18n._({
        id: "passkey.registrationSuccess.title",
        message: "Passkey successfully created!"
    })), webAuthnRegistrations && webAuthnRegistrations.length > 0 && /*#__PURE__*/ React__default.createElement(Column, {
        gap: 4
    }, /*#__PURE__*/ React__default.createElement(Typography, {
        weight: "medium"
    }, $__i18n._({
        id: "passkey.registrationSuccess.existingPasskeys",
        message: "Existing Passkeys"
    })), /*#__PURE__*/ React__default.createElement(Column, {
        className: modules_04e642ad.existing
    }, webAuthnRegistrations.map((registration)=>// TODO: Add some type of device icon once we have better insight into that.
        // deviceTypeToIcon[determineDeviceType(registration.user_agent)]
        /*#__PURE__*/ React__default.createElement(EditableRow, {
            className: modules_04e642ad.passkeyRow,
            key: registration.webauthn_registration_id,
            id: registration.webauthn_registration_id,
            name: registration.name,
            state: editableRowState,
            updateState: setEditableRowState,
            handleEdit: updateReg
        })))), /*#__PURE__*/ React__default.createElement(ButtonColumn, null, editableRowState.type === 'deleting' ? /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, /*#__PURE__*/ React__default.createElement(Button, {
        variant: "destructive",
        onClick: ()=>{
            deleteReg(editableRowState.id);
        }
    }, $__i18n._({
        id: "button.delete",
        message: "Delete"
    })), /*#__PURE__*/ React__default.createElement(ErrorText, {
        // alert role to ensure this gets read out when the row delete button is clicked
        role: "alert"
    }, $__i18n._({
        id: "passkey.registrationSuccess.deleteWarning",
        message: "Once deleted, the passkey cannot be restored."
    })), /*#__PURE__*/ React__default.createElement(Button, {
        variant: "ghost",
        onClick: ()=>{
            setEditableRowState({
                type: 'viewing'
            });
        }
    }, $__i18n._({
        id: "button.cancel",
        message: "Cancel"
    }))) : /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, /*#__PURE__*/ React__default.createElement(Button, {
        variant: "primary",
        disabled: editableRowState.type === 'editing',
        onClick: onSetUpANewPasskey
    }, $__i18n._({
        id: "passkey.registrationSuccess.setupAnother",
        message: "Set up another Passkey"
    })), /*#__PURE__*/ React__default.createElement(Button, {
        variant: "ghost",
        disabled: editableRowState.type === 'editing',
        onClick: onDone
    }, $__i18n._({
        id: "button.done",
        message: "Done"
    })))));
};

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