'use client'
import { jsx, jsxs } from 'react/jsx-runtime';
import { useTranslation } from 'react-i18next';
import { IconButton } from '../../../../components/IconButton/IconButton.js';
import { ModalHeader } from '../../../../components/ModalHeader/ModalHeader.js';
import { PasskeyCreatedSuccessBanner } from '../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
import { Skeleton } from '../../../../components/Skeleton/Skeleton.js';
import { Typography } from '../../../../components/Typography/Typography.js';
import { TypographyButton } from '../../../../components/TypographyButton/TypographyButton.js';
import { usePasskeyContext } from '../../../../context/PasskeyContext/PasskeyContext.js';
import 'react';
import { ReactComponent as SvgAdd } from '../../../../shared/assets/add.js';
import { ReactComponent as SvgChevronLeft } from '../../../../shared/assets/chevron-left.js';
import '@dynamic-labs/iconic';
import '../../../../context/ViewContext/ViewContext.js';
import '@dynamic-labs-sdk/client/core';
import '@dynamic-labs/sdk-api-core';
import '../../../../client/client.js';
import '@dynamic-labs-sdk/client';
import '../../../../config/ApiEndpoint.js';
import '@dynamic-labs/wallet-connector-core';
import '../../../../shared/logger.js';
import '@dynamic-labs/wallet-book';
import '@dynamic-labs/utils';
import '../../../../utils/constants/colors.js';
import '../../../../utils/constants/values.js';
import '../../../../shared/consts/index.js';
import '../../../../../../_virtual/_tslib.js';
import '@dynamic-labs/multi-wallet';
import 'react-international-phone';
import '../../../../store/state/nonce/nonce.js';
import '@dynamic-labs/locale';
import '../../../../store/state/dynamicContextProps/dynamicContextProps.js';
import '../../../../store/state/primaryWalletId/primaryWalletId.js';
import '../../../../store/state/connectedWalletsInfo/connectedWalletsInfo.js';
import '../../../../events/dynamicEvents.js';
import { useProjectSettings } from '../../../../client/extension/projectSettings/useProjectSettings/useProjectSettings.js';
import { usePasskeyRecovery } from '../../../../utils/hooks/usePasskeyRecovery/usePasskeyRecovery.js';
import { PasskeyCard } from '../../components/PasskeyCard/PasskeyCard.js';
import { useWidgetContext } from '../../context/DynamicWidgetContext.js';

const ManagePasskeysWidgetView = () => {
    var _a;
    const { setDynamicWidgetView } = useWidgetContext();
    const { userPasskeys, userPasskeysLoading: isLoading } = usePasskeyContext();
    const projectSettings = useProjectSettings();
    const { initPasskeyRecoveryProcess } = usePasskeyRecovery();
    const { t } = useTranslation();
    const isRecoveryEnabled = Boolean((_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.embeddedWallets) === null || _a === void 0 ? void 0 : _a.emailRecoveryEnabled);
    const backButton = (jsx(IconButton, { type: 'button', onClick: () => setDynamicWidgetView('account-and-security-settings'), "data-testid": 'back-button', children: jsx(SvgChevronLeft, {}) }));
    return (jsxs("div", { className: 'manage-passkeys-widget-view', children: [jsx(ModalHeader, { leading: backButton, children: jsx("div", { className: 'send-balance-page-layout__header-content', children: jsx(Typography, { variant: 'title', color: 'primary', copykey: 'dyn_manage_passkeys.title', children: t('dyn_manage_passkeys.title') }) }) }), jsx(PasskeyCreatedSuccessBanner, {}), jsxs("div", { className: 'manage-passkeys-widget-view__body', children: [jsx("div", { className: 'manage-passkeys-widget-view__body__cards', children: isLoading ? (jsx(Skeleton, { count: 1, className: 'manage-passkeys-widget-view__body__cards__skeleton' })) : (userPasskeys.map((passkey) => (jsx(PasskeyCard, { passkey: passkey }, passkey.id)))) }), isRecoveryEnabled && (jsx(TypographyButton, { buttonPadding: 'large', buttonClassName: 'manage-passkeys-widget-view__body__recovery-button', onClick: () => initPasskeyRecoveryProcess('passkey'), showInternalLoading: false, startSlot: jsx(SvgAdd, {}), copykey: 'dyn_manage_passkeys.recovery_button', children: t('dyn_manage_passkeys.recovery_button') }))] })] }));
};

export { ManagePasskeysWidgetView };
